0

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

模态的.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>
  );
}

卡片.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>
    );
  }
}

4

1 回答 1

1

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

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

当然，最好写一个接口FormDialogProps并props: FormDialogProps为多个道具和可重用性做。

然后你可以这样做：

<FormDialog value="string" />
<FormDialog value={'string'} />
<FormDialog value={variable} />
于 2019-08-06T12:52:04.013 回答