主页 / user-11188050

Chase Thorpe's questions

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

我正在尝试用 TypeScript 和 MaterialUI 编写一个可重复使用的表单对话框。我希望能够将对话框将呈现的表单组件数组作为 prop 传递给对话框。在对话框中，状态索引将跟踪当前表单并呈现它。但我无法让它工作。这是我目前拥有的代码：

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>
    );
};

我遇到的问题是在 FormDialog 组件中，我尝试在其中呈现当前子项。TypeScript 说我没有提供所需的道具，但我认为这些道具确实存在于我定义 FormOne 的地方。如果我必须在 FormDialog 中重新定义道具，那么这完全违背了能够将组件传递给管理其自身道具的对话框的目的。有办法解决这个问题吗？

reactjs