Question

我有使用ReactJS动态呈现的链接，我想遵循以下逻辑：我想返回8到8组并用如下图像填充空白空间：

<a>Content</a> <!--1-->
<a>Content</a> <!--2-->
<a>Content</a> <!--3-->
<a>Content</a> <!--4-->
<a>Content</a> <!--5-->
<a>Content</a> <!--6-->
<a>Content</a> <!--7-->
<a>Content</a> <!--8-->
<a>Content</a> <!--1-->
<a>Content</a> <!--2-->
<a>Content</a> <!--3-->
<a>Content</a> <!--4-->
<a>Content</a> <!--5-->
<img src="square.jpg"/> <!--6-->
<img src="square.jpg"/> <!--7-->
<img src="square.jpg"/> <!--8-->

每8个链接组的划分将通过分页进行，这不是目的。我只专注于填补空白。

这是我的组件React代码的一部分，用于呈现动态HTML：

return (
      <div>          
        {this.state.interiores.map(item =>
          <div>
            <div className="gallery">
              {
                item.fotos
                  .map((foto) => {
                    return (
                      <a href={`../images/${foto}.jpg`} className="big">
                        <img src={`../images/${foto}_thumb.jpg`} alt="" />
                      </a>
                    )
                  })
              }
            </div>
          </div>
        )}
    )

我该如何解决？谢谢

Answer 1

请记住，尽管JSX标签外观类似于html，但它们已编译为常规的旧js对象。您可以简单地创建数组，然后使用小于8的缓冲区图像填充数组。例如

renderFoto = (foto) => {
  return (
    <a href={`../images/${foto}.jpg`} className="big" key={foto}>
      <img src={`../images/${foto}_thumb.jpg`} alt="" />
    </a>
  )
}

renderBufferImage = (index) => {
  const key = `placeholder${fotos.length}`
  return <img src={'square.jpg'} key={key} />
}

renderItem = item => {
  // make an array of all the fotos
  const fotos = item.fotos.map(this.renderFoto)
  // add buffer images until filled to 8
  while (fotos.length < this.pageSize) {
    fotos.push(this.renderBufferImage(fotos.length))
  }
  // render the array inside a div
  return (
    <div>
      <div className="gallery">{fotos}</div>
    </div>
  )
}

render = () => {
  return <div>{this.state.interiores.map(this.renderItem)}</div>
}

ReactJS逻辑：返回8到8链接，并用图像填充空白处

1 个答案: