Javascript 如何在ReactJS中打断动态内容中的行？

我有一个从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分开 如下面的示例所示：

<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

/
{
项目1.fotos
.map（foto=>{
返回(
) 
})
}
)}
}

我怎样才能解决它？谢谢

一个简单的方法是

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

render（）{
设项目=[]；
让图像=[]；
this.state.interiors.map（（项目，i）=>{
item.fotos.map（（foto，i1）=>{
image.push（）；
});
推(
{图像}
);
项目。推送（
）；
});
返回(
{items}
)
}

一个简单的方法是

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

render（）{
设项目=[]；
让图像=[]；
this.state.interiors.map（（项目，i）=>{
item.fotos.map（（foto，i1）=>{
image.push（）；
});
推(
{图像}
);
项目。推送（
）；
});
返回(
{items}
)
}

如果您的最终目标是在每4次

锚定后休息，而不管
br
标记，请尝试以下CSS规则：

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


a:n子代（4n+4）{
边缘底部：10px；
}
a{
边框：2倍纯绿；
显示：块；
填充：10px；
背景：灰色；
}/*此规则仅适用于视觉表示*/
如果您的最终目标是在每4次
锚定后休息，而不管
br
标记，请尝试以下CSS规则：

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


a:n子代（4n+4）{
边缘底部：10px；
}
a{
边框：2倍纯绿；
显示：块；
填充：10px；
背景：灰色；
}/*此规则仅适用于视觉表示*/

而不是

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

使用

获取映射迭代器

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

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

。。。。。
{索引%4==0？
:}

它将有条件地插入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>
  )
}

stackoverflow=（）=>{
设fotos=[]；
让内部=[]；
常量库=（项目）=>item.fotos.map（（foto，索引）=>
{索引%4==0？
:}
)
返回(
室内设计图（项目=>画廊（项目））
)
}
而不是

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

使用

获取映射迭代器

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

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

。。。。。
{索引%4==0？
:}

它将有条件地插入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>
  )
}

stackoverflow=（）=>{
设fotos=[]；
让内部=[]；
常量库=（项目）=>item.fotos.map（（foto，索引）=>
{索引%4==0？
:}
)
返回(
室内设计图（项目=>画廊（项目））
)
}
这样做是一个问题，因为您只需要返回一个父标记来包装子标记，这在ReactJs上是强制性的。在这种情况下，它被重新命名为2个sibblings标记：和
。如何解决？你会遇到什么错误？我想你可以用包装纸包起来
此处的内容
@claudiobitarIt必须在返回时具有父标记：.map（foto=>{return（…错误消息为：意外标记，预期为，（但此消息与此问题无关。如果您使用React 16.x.x，您可以使用片段API来解决此问题。以这种方式执行此操作存在一个问题，因为您只需要返回一个父标记来包装子标记，这在React JS上是强制性的。在这种情况下，将返回2个子标记：和
。如何解决此问题e它？你会遇到什么错误？我想你可以用包装来完成。
你的东西在这里
@claudiobitarIt必须在返回时有一个父标记：.map（foto=>{return（…错误消息是：意外标记，预期，（但此消息与此问题无关。如果您使用React 16.x.x，则可以使用片段API来解决此问题，图像数量无关紧要，因为它是一个动态内容，必须将其分为4和1组，后面加上4和1。例如：contentcontent
，然后再…再…imag。）es数量无关紧要，因为它是一个动态内容，必须将其分成4和1两组。例如：content
和。。。