Javascript ReactJS逻辑：返回8到8个链接并用图像填充空白位置

我有使用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-->

)
})
}
)}
)

---

我怎样才能解决它？谢谢

请记住，虽然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>
}

renderFoto=（foto）=>{
返回(
)
}
renderBufferImage=（索引）=>{
const key=`占位符${fotos.length}`
返回
}
renderItem=项目=>{
//把所有的foto组成一个数组
const fotos=item.fotos.map（this.renderFoto）
//添加缓冲区图像，直到填充到8
while（fotos.length{
返回{this.state.interiors.map（this.renderItem）}
}

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