Reactjs Material：如何将 props 传递给 reactjs 材质对话框

Question

如何将 props 传递给 reactjs material dialog？如果我这样做< FormDialog value={this.prop.value} />，则抛出Type '{ value: any; }' is not assignable to type 'IntrinsicAttributes' 错误。我如何为FormDialog() 分配类型或以任何其他方式将道具传递给该组件？

Modal.tsx

export default function FormDialog() {
  const [open, setOpen] = React.useState(false);

  function handleClickOpen() {
    setOpen(true);
  }

  function handleClose() {
    setOpen(false);
  }

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open form dialog
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
        <DialogContent>
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="Email Address"
            type="email"
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Subscribe
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

Card.tsx

class ShipmentCard extends Component<ShipmentCardProps, ShipmentCardState> {
  render() {
    return (
      <Card className="Card">
        <CardContent className="Card-Content">
        <FormDialog />
          <Grid container spacing={3}>
            <h3 className="Card-Content__Title">{this.props.value.name}</h3>
            <FormDialog  />{/*how i can pass this.props.value  */}
          </Grid>
        </CardContent>
      </Card>
    );
  }
}

Answer 1

您的函数组件没有声明的道具。你可以这样做：

export default function FormDialog(props: { value: string }) {
   ...
}

当然最好写一个接口FormDialogProps，再做一个props: FormDialogProps，用于多个props和可复用性。

那么你可以这样做：

<FormDialog value="string" />
<FormDialog value={'string'} />
<FormDialog value={variable} />