Question

我有一个来自React JS的动态内容，该内容生成了以下HTML：

<a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

<a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

//...successively

我想将这些链接从4改为4，并用换行符<br/>分隔就像下面的例子：

<a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

<a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

<a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

<a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

<br/> // <--- LINE BREAK

<a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

// ,,,successively

这是我的组件ReactJS代码的一部分。仅显示负责渲染的部分代码。 HTML渲染成功进行。

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

我该如何解决？谢谢

Answer 1

如果您的最终目标是在每anchor个标签后的第br天之后休息一下，请尝试以下CSS规则：

a:nth-child(4n+4) {
  margin-bottom: 10px;
}

a:nth-child(4n+4) {
   margin-bottom: 10px;
 }

a {
  border: 2px solid green;
  display: block;
  padding: 10px;
  background: gray;
}/*This rule is only for visual representation*/

<div>

  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>


  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>
  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>

  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>


  <a href='../images/image_name.jpg.jpg'>
  <img src='../images/image_name_thumb.jpg' alt="" />
</a>
</div>

Answer 2

代替

this.fotos.map(foto =>   .....

使用

this.fotos.map((foto, index) =>   .....

获取地图迭代器。

然后在锚标记后插入以下三元运算符：

.....
</a>
{index % 4 == 0 ? <br/> : <div></div>}

将有条件地插入br标签。

您可以这样组织代码：

stackoverflow = () => {
  let fotos = [];
  let interiors = [];

  const gallery = (item) => item.fotos.map((foto, index) =>
    <div className="gallery">
      <a>
        <img>
        </img>
      </a>
      {index%4 == 0 ? <br/> : <div></div>}
    </div>
  )

  return(
    <div>interiors.map(item => gallery(item))</div>
  )
}

Answer 3

一种简单的方法是

render() {
  let items = [];
  let images = [];
  this.state.interiores.map((item, i) => {
    item.fotos.map((foto, i1) => {
      images.push(<a key={i1} href={`../images/${foto}.jpg`}
        <img src={`../images/${foto}_thumb.jpg`} alt="" />
      </a>);
    });
    items.push(<div key={i} className="gallery">
      {images}
    </div>);
    items.push(<br />);
  });
  return (
    <div>{items}</div>
  )
}

如何在ReactJS中的动态内容中换行？

3 个答案: