Question

如何将道具传递给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。

那么您可以做：

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

Reactjs材质：如何传递至reactjs材质对话框的道具

1 个答案: