如何使用可重用代码传递不同的值？

Question

我正在练习创建可重复使用的代码，这样我就不必一遍又一遍地复制和粘贴相同的组件。但是，我在可重用代码中遇到了问题 accessing/modifying "sectionTitle" 和 "helpText"。

这是可重复使用的代码。

export function Form(props) {
  const classes = useStyles();
  const { children, sectionTitle, helperText } = props;
  return (
    <form className={classes.root} autoComplete="off">
      <h1>{sectionTitle}</h1>
      <Divider />
      <p>{helperText}</p>
      <Grid container>
           <Grid>
              {props.children}
          </Grid>
      </Grid>
    </form>
  );
}

我已调用此函数来呈现多个表单。

render (
    <Form>
        <h1>Title</h1>
        <p>HelperText</p>
        <InputField/>
    </Form>
    <Form>
        <h1>Title2</h1>
        <p>HelperText2</p>
        <InputField/>
    </Form>
)

Answer 1

这些值不是作为道具传递的，而是作为子项传递的。根据 Form 道具的定义，看起来用法应该是：

<Form sectionTitle='Title' helperText='HelperText'>
    <InputField/>
</Form>
<Form sectionTitle='Title2' helperText='HelperText2'>
    <InputField/>
</Form>

如以下评论所述，这也是无效的 JSX，因为它需要有一个根元素。可以像片段一样简单：

<>
  <Form sectionTitle='Title' helperText='HelperText'>
      <InputField/>
  </Form>
  <Form sectionTitle='Title2' helperText='HelperText2'>
      <InputField/>
  </Form>
</>

Answer 2

试试这样改写


render (
     <>
      <Form sectionTitle="Title" helperText="HelperText">
          <InputField/>
      </Form>
      <Form sectionTitle="Title2" helperText="HelperText2">
          <InputField/>
      </Form>
    </>

)

如何使用可重用代码传递不同的值？

How do I pass in different values using reusable code?

html

function

reusability

reactjs

react-hooks