reactjs - 将组件分组以制作子组件

Question

我正在尝试在 React 中制作我认为称为子组件的东西，尽管我找不到任何关于如何做到这一点的官方最新文档。我的问题是我想制作一个大型表格，其中不同的部分被分解为引导卡，在一张卡片中我想要任意数量的inputs 行。

前任）

Section 1
    First_Name    Last_Name
    Email_Address

Section 2
    Address
    City     State     Zip
    

第 1 节的代码如下所示：

<div className="MyCard floatingCard card">
  <h5 className="MyCardHeader card-header">Section 1</h5>
  <div className="MyCardBody card-body">

    {/* Row 1 */}
    <div className="row">
        
        <div className="form-group col-md-6" style={{ marginBottom: "2em" }}>
          <input />
        </div>

        <div className="form-group col-md-6" style={{ marginBottom: "2em" }}>
          <input />
        </div>

    </div>

    {/* Row 2 */}
    <div className="row">
        <div className="form-group col-md-12" style={{ marginBottom: "2em" }}>
          <input />
        </div>

    </div>

  </div>
</div>

上面不是很干净，我也需要对第 2 部分做同样的事情，有没有办法让它看起来像：

<FormSection header="Section1">

    <FormRow>
        <Input name="firstName" label="First Name"  />
        <Input name="lastName" label="Last Name"  />
    </FormRow>

      <FormRow>
          <Input name="email" label="Email address"  />
      </FormRow>
</FormSection>

<FormSection header="Section2">
    <FormRow>
        <Input name="email" label="Email address"  />
    </FormRow>

    <FormRow>
        <Input name="city" label="City"  />
        <Input name="state" label="State"  />
        <Input name="zip" label="Zip"  />
    </FormRow>

</FormSection>

标签： reactjsbootstrap-4react-bootstrap