时间戳

首页 > 解决方案 > 在 ReactJS 中换行是我的逻辑错误

javascript - 在 ReactJS 中换行是我的逻辑错误

问题描述

我的目标是在 4 到 4 个链接组中换行，就像 ReactJS 动态 HTML 返回中的那样：

<a>Content</a><a>Content</a><a>Content</a><a>Content</a><br/> 
<a>Content</a><a>Content</a><a>Content</a><a>Content</a><br/> 
<a>Content</a><a>Content</a><a>Content</a><a>Content</a><br/>  
// again and again...

我的逻辑正在回归：

    // WRONG
    <a>Content</a><br/> 
    // OK
    <a>Content</a><a>Content</a><a>Content</a><a>Content</a><br/> 
    // WRONG
    <a>Content</a><br/>

这是我的 ReactJS 组件的渲染：

render() {
    return (
      <div>         
        {this.state.interiores.map(item =>
          <div>
            <div className="gallery">
              {
                item.fotos
                  .map((foto,index) => {
                    return (
                      <React.Fragment>
                        <a href={`../images/${foto}.jpg`} className="big">
                          <img src={`../images/${foto}_thumb.jpg`} alt="" />
                        </a>
                        // Here is the logic
                        {index % 4 == 0 ? <br /> : ''}
                      </React.Fragment>
                    )
                  })
              }
            </div>
          </div>
        )}
}

标签： javascriptreactjs

解决方案

您必须记住，数组索引从 0 开始。这意味着它只会在第三项而不是第四项之后呈现中断规则。要解决此问题，您可以将 1 添加到索引。

代码沙箱示例

https://codesandbox.io/s/w09jlx65rl

例子

render() {
  return (
    <div>
      {this.state.interiores.map(item => (
        <div>
          <div className="gallery">
            {item.fotos.map((foto, index) => {
              return (
                <React.Fragment>
                  <a href={`../images/${foto}.jpg`} className="big">
                    <img src={`../images/${foto}_thumb.jpg`} alt="" />
                  </a>
                  // Here is the logic
                  {(index + 1) % 4 === 0 ? <br /> : ""}
                </React.Fragment>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}

推荐阅读