我的逻辑在ReactJS中断行是错误的

Question

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

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

Answer 1

您必须记住，数组索引从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>
  );
}

Answer 2

如果要在4之后添加<br>，则应使用%运算符。 但是请注意0 % 4 == 0的事实，因此在第一项之后将添加<br>。

您可以更改代码以检查index是否大于0。

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 > 0 && index % 4 == 0) ? <br /> : ''}
                      </React.Fragment>
                    )
                  })
              }
            </div>
          </div>
    )}
}