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

Posted 2023-02-22

【中文标题】Reactjs Material：如何将 props 传递给 reactjs 材质对话框

【英文标题】：Reactjs Material: How to pass to props to reactjs material dialog

【发布时间】：2019-12-14 00:20:44

【问题描述】：

如何将 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>
    );
  

【问题讨论】：

不需要将组件定义为获取道具吗？

@Dave，我尝试将FormDialog 作为组件，但它不起作用。你知道有什么更好的方法来实现吗？

【参考方案1】：

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

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

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

那么你可以这样做：

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

【讨论】：

如何在FormDialog 的html 中使用该值？我收到Invalid prop children

您可以在 JSX 代码中将其用作 props.value，在 javascript 代码中用作 props.value。道具children 是另一个道具，如果你想使用它，你必须声明它。通常输入为children: React.ReactNode。 children prop 是你放在组件标签之间的任何东西：<FormDialog>this is a children string</FormDialog>.

你可以在reactjs.org/docs/components-and-props.htmlreactjs.org/docs/jsx-in-depth.html#children-in-jsx等文档中找到。

注意到了。当我像这样通过<FormDialog value=this.props.value /> 时遇到错误。如果我通过字符串工作良好