在反应中制作表格答案

【问题标题】：Making a table in react在反应中制作表格
【发布时间】：2018-05-23 00:31:48
【问题描述】：

我现在要绘制 9 张图片并制作 3x3 表格。但是，我不太确定应该如何构建代码。

如何编写“如果一行有3张图片，则另起一行”之类的代码？我不确定逻辑应该如何。我正在从 graphql 获取所有数据。

现在，我有：

<div className="feature-images-wrapper col-6">
      <table className="table">
        <tbody>
          {data.allPictures.edges.map(edge => (
            <Pictures node={edge.node} />
          ))}
        </tbody>
      </table>
    </div>

在tbody标签中，我映射的是Pictures组件，即：

const Pictures = ({ node }) => {

return (
    <tr>
      <td>
        <div className="feature-image-container">
          <a href={node.picUrl} targer="__blank">
            <img
              className="img-fluid features-logo-img"
              src={node.pic.responsiveResolution.src}
            />
          </a>
        </div>
      </td>
    </tr>
  );
};

这给了我 9 行，每行一张图片。我觉得应该有一个条件语句来制作一个 3x3 表？我不确定我应该如何构建它。

帮助:)！

【问题讨论】：

标签： reactjs

【解决方案1】：

You can use react-boostrap's grid/row/col.

Below is a sample code I have used to demonstrate 3*3 matrix using grid(react-bootstrap)

    import {Grid, Col, Row} from 'react-bootstrap';

     const renderImages = [...Array(3)].map((val) => {
                return <Row className="show-grid">
                    <br />
                    <Col md={3}>
                        <img src={placeholder} />

                    </Col>
                    <Col md={3}>
                        <img src={placeholder} />

                    </Col>
                    <Col md={3}>
                        <img src={placeholder} />

                    </Col>

                </Row>
            })

            const gridInstance = (
                <Grid>
                    {renderImages}
                </Grid>
            );

终于可以使用gridInstance变量来显示了。

希望这会有所帮助：D

【讨论】：

嗨！谢谢回答。不过有一个问题：[...Array(3)] 在代码中代表什么？？
Array(3) 给出长度并添加 [...Array(3)] ，将启用迭代。我们也可以使用 Array.from({length: 3}) 来迭代 3 次。仅供参考，Array.from 来自 ES6。欲了解更多信息，请查看-developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
谢谢约翰！帮助很大:)
乐于助人 :).. 快乐编码 :D
谢谢 :) 你也是！

【解决方案2】：

创建两个新组件，行和列。 Column ：发送一个图像 url 作为道具，它应该呈现它。行：发送大小为 3 的 3 个图像 url 的数组，它将发送到 3 Column 组件。

现在从主组件渲染 3 行组件。

这是 3 x 3 的硬编码。您也可以使其动态化。在行组件中渲染列组件等于 props.imageUrl.length 中的元素个数。

您可以使用jsx-control-statements

只需循环props.imageUrl.length

【讨论】：