Início / user-11188050

Chase Thorpe's questions

Martin Hope
Chase Thorpe
Asked: 2025-01-07 02:11:44 +0800 CST
  • 5

Estou tentando escrever um diálogo de formulário reutilizável em TypeScript e MaterialUI. Quero poder passar como prop para o diálogo um array de componentes Form que o diálogo renderizará. Dentro do diálogo, um índice de estado rastreará o formulário atual e o renderizará. Mas não consigo fazê-lo funcionar. Aqui está o código que tenho até agora:

interface CustomFormProps {
  hasNext: boolean,
  hasPrev: boolean,
  hasSubmit: boolean
}

const FormOne:React.ComponentType<CustomFormProps> = ({hasNext= true, hasPrev= true, hasSubmit= true}) => {
  return (
    <Box>
      <Typography>
        {hasNext ? "NEXT" : ""}
        {hasPrev ? "PREV" : ""}
        {hasSubmit ? "SUBMIT" : ""}
      </Typography>
    </Box>
  )
}

interface FormDialogProps {
    toggleDialog: () => void | undefined,
    isOpen: boolean,
    headerText: string,
    stepLabels: Array<string>,
    steps: React.ComponentType<CustomFormProps>[]
}

const FormDialog = (props: FormDialogProps) => {
    const theme = useTheme();
    const [currentForm, setCurrentForm] = useState(0);

    const next = () => {

    }

    const previous = () => {

    }

    const submit = () => {

    }

    const Current:React.ComponentType<CustomFormProps> = props.steps[currentForm];
    return (
        <Dialog onClose={props.toggleDialog} open={props.isOpen} fullWidth maxWidth="md">
            <DialogTitle sx={{ borderBottom: `1px solid ${theme.colors.gold.neutral}`, backgroundColor: theme.colors.gold.neutral, padding: "20px" }}>
                <strong>{props.headerText}</strong>
            </DialogTitle>
            <DialogContent sx={{ marginTop: "12px", display: "flex", flexDirection: "column" }}>
                <Current />
            </DialogContent>
            <DialogActions sx={{ borderTop: `1px solid ${theme.colors.gold.neutral}`, backgroundColor: theme.colors.gold.neutral, padding: "20px" }}>
                <Button variant="outlined" onClick={props.toggleDialog} sx={{ color: "black" }}>Previous</Button>
                <Button variant="outlined" onClick={props.toggleDialog} sx={{ color: "black" }}>Next</Button>
                <Button variant="outlined" onClick={props.toggleDialog} sx={{ color: "black" }}>Submit</Button>
            </DialogActions>
        </Dialog>
    );
};

O problema que estou tendo é no componente FormDialog onde tento renderizar o filho atual. O TypeScript está dizendo que não forneci os props necessários, mas acho que esses props existem onde defino o FormOne. Se eu tiver que redefinir os props dentro do FormDialog, isso meio que anula completamente o propósito de poder passar componentes para o diálogo que gerenciam seus próprios props. Existe uma maneira de contornar isso?

reactjs