从对象动态生成 react-bootstrap 网格

Question

我希望从下面的对象动态生成网格布局。我正在努力解决这个问题的逻辑。对于每一行，我需要它来生成其中的列，并且在每一列中，我需要吐出小部件。请注意，如果需要，我可以更改对象的结构。

    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 />,
      }],
  }

下面生成的示例网格：

        <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>

Answer 1

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

<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>