Question

我现在要拍摄9张照片并制作3x3桌子。但是，我不太确定我应该如何构建代码。

如何编写诸如＆＃34之类的代码;如果一行中有3张图片，请创建一个新行＆＃34;？我不确定逻辑应该如何。我从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标签中，我正在映射图片组件，即：

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表？我不确定应该如何构建它。

帮助:)！

Answer 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

Answer 2

创建两个新组件Row和Column。专栏：发送图片网址作为道具，它应该呈现它。行：发送3个图像URL的三个数组，它将发送到3列组件。

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

这是3乘3的硬编码。你也可以使它动态化。在行组件渲染列组件中，与props.imageUrl.length中的元素相等。

您可以使用jsx-control-statements

只需循环props.imageUrl.length

做出反应的表

2 个答案: