Javascript 从对象动态生成react引导网格

我希望从下面的对象动态生成网格布局。我正在努力弄清楚这其中的逻辑。对于每一行，我需要它生成其中的列，在每一列中，我需要吐出小部件。注：如果需要，我可以更改对象的结构

    const layout = {
      row: [{
        column: <Col sm={6} md={3} />,
        widget: <Temp />,
      },{
        column: <Col sm={6} md={3} />,
        widget: <Humidity />,
      },{
        column: <Col sm={6} md={3} />,
        widget: <Noise />,
      },{
        column: <Col sm={6} md={3} />,
        widget: <Lumanosity />,
      }],
      row:[{
        column: <Col md={12} />,
        widget: <Occupancy />,
      }],
  }

const布局={
行：[{
列：，
小部件：，
},{
列：，
小部件：，
},{
列：，
小部件：，
},{
列：，
小部件：，
}],
行：[{
列：，
小部件：，
}],
}

生成的网格示例如下：

        <Grid>

         <Row className="show-grid">

          <Col sm={6} md={3}>
            <Panel className="box">
              <Temp />
            </Panel>
          </Col>

          <Col sm={6} md={3}>
            <Panel className="box">
              <Humidity />
            </Panel>
          </Col>

          <Col sm={6} md={3}>
            <Panel className="box">
              <Noise />
            </Panel>
          </Col>

          <Col sm={6} md={3}>
            <Panel className="box">
                <Lumanosity />
              </Panel>
          </Col>

        </Row>

        <Row className="show-grid">
          <Col sm={12} md={12}>
            <Panel className="box">
              <Occupancy />
            </Panel>
          </Col>

        </Row>
      </Grid>

---

我认为您需要更改代码中的常量，如下所示：

<Grid>

     <Row className="show-grid">

      <Col sm={6} md={3}>
        <Panel className="box">
          <toast />
        </Panel>
      </Col>

      <Col sm={6} md={3}>
        <Panel className="box">
          <cheese />
        </Panel>
      </Col>

      <Col sm={6} md={3}>
        <Panel className="box">
          <candles />
        </Panel>
      </Col>

      <Col sm={6} md={3}>
        <Panel className="box">
            <peppercornSauce />
          </Panel>
      </Col>

    </Row>

---

解释原因？只使用代码的答案对任何人都没有帮助！