React JS中向Modal传递带值Form组件及报错排查

这个报错和Modal组件传props、组件嵌套逻辑无关，是ContactUS.js里的表单项写法不符合HTML规范导致的：
原生HTML中<input>属于空元素（void element），规范明确要求这类标签不能包含子节点，也不能使用dangerouslySetInnerHTML设置内容。你在使用React Bootstrap的Form.Control组件时，给type="text"/"number"/"email"这类最终会渲染为原生input的组件，在开闭标签之间写入了字段说明文本（比如First Name、Last Name等），这些文本会被当做children传入底层组件，最终挂载到原生input标签下直接触发报错。

另外你的多行文本框也存在写法问题：React Bootstrap中渲染textarea类型的输入框不能用type="textarea"，需要设置as="textarea"，否则也会被解析为input元素。

你当前触发报错的代码结构如下，标签中间的文本就是问题根源：

<Form.Control
  type="text"
  placeholder="Enter your First Name"
  value={FirstName}
  onChange={inputHandler}
  name="FirstName"
>
  First Name {/* 这段子内容会被传入input标签，直接触发报错 */}
</Form.Control>

你的Modal组件逻辑完全正常，不需要做任何修改，只需要调整ContactUs组件里的Form.Control写法即可：

• 所有非textarea类型的Form.Control改成自闭合标签，删除开闭标签之间的所有文本
• 字段说明文本使用配套的Form.Label组件单独渲染，这也是React Bootstrap官方推荐的标准写法
• 多行文本框把type="textarea"改成as="textarea"

修复后的表单核心代码如下：

<Form onSubmit={onSubmit}>
  <Form.Group className="mb-3">
    <Form.Label>First Name</Form.Label>
    <Form.Control
      type="text"
      placeholder="Enter your First Name"
      value={FirstName}
      onChange={inputHandler}
      name="FirstName"
    />

    <Form.Label>Last Name</Form.Label>
    <Form.Control
      type="text"
      placeholder="Enter your Last Name"
      value={LastName}
      onChange={inputHandler}
      name="LastName"
    />

    <Form.Label>Phone Number</Form.Label>
    <Form.Control
      type="number"
      placeholder="Enter your Ph Number"
      value={phoneNo}
      onChange={inputHandler}
      name="phoneNo"
    />

    <Form.Label>Email ID</Form.Label>
    <Form.Control
      type="email"
      placeholder="Enter your Email ID"
      value={emailID}
      onChange={inputHandler}
      name="emailID"
    />

    <Form.Label>Company Name</Form.Label>
    <Form.Control
      type="text"
      placeholder="Enter your Company Name"
      value={company}
      onChange={inputHandler}
      name="company"
    />

    <Form.Label>Company Website</Form.Label>
    <Form.Control
      type="text"
      placeholder="Enter your Company Website"
      value={website}
      onChange={inputHandler}
      name="website"
    />

    <Form.Label>Project Description</Form.Label>
    <Form.Control
      as="textarea"
      rows={3}
      placeholder="Describe about your project"
      value={ExpainProj}
      onChange={inputHandler}
      name="ExpainProj"
    />
  </Form.Group>
  <Button variant="primary" type="submit">
    Submit
  </Button>
</Form>

改完之后刷新页面，模态框就能正常加载表单，提交逻辑也可以正常触发。

内容的提问来源于stack exchange，提问作者Still_Learning