Javascript 如何在react中的循环内生成换行符？

我有一个react组件，我需要把它分成几行。我猜它会产生4-5盒李的循环回报。我想做的是在上面有2个盒子，然后在下面有3个。因此，如果有4个盒子，它们将堆叠2x2在彼此的顶部。如果有5个，上面2个，下面3个

所以问题是，如何在react中的循环返回中生成换行符

代码：

从“React”导入React
从“classnames”导入类名
导出默认类Tile扩展React.Component{
建造师（道具）{
超级（道具）
}
组件将出现（完成）{
//设rotateZ=`rotateZ（${~~（Math.random（）*-20）+
Math.random（）*40）}deg）`
//设rotateX=`rotateX（${~~（Math.random（）*80）}度）`
//设scale=`scale（${.65+Math.random（）*.25}）`
//设initialTransform={
//变换：`${rotateZ}${rotateX}${scale}`
// }
//this.refs.container.style.transform=`${rotateZ}${rotateX}${
比例}`
this.refs.container.classList.add（'Tile--isAppearing'）
完成（）
}
组件显示（）{
设置超时（（）=>{
//设置可见和清晰的抖动
this.refs.container.classList.remove（'Tile--isAppearing'）
this.refs.container.style.transform=''
}，Math.random（）*（this.props.number*250））
}
onClick=event=>{
const{id，value}=this.props
this.props.onClick（id，value）
}
render（）{
//添加矩阵抖动
让类=类名({
"瓦片":对,，
“Tile--isSelected”：this.props.selected
})
返回(

{this.props.text}

)
}
}

请求的第二组代码：

render() {
let tiles = this.props.slide.answers
  .map( ( answer, index ) => {
    let id = 'answer' + index
    return <Tile
      key={ id }
      id={ id }
      value={ answer.value }
      text={ answer.text }
      selected={ this.selected.has( id ) }
      onClick={ this.onTileClick }
    />
  })

 let buttonClasses = classnames( 'Btn', 'Btn--isOrange', 'Btn--
 isContinue', {
  'u-transparent': !this.state.complete
})

   return (
  <div ref="main" className="js-main State">
    <p className="Question-Body">
      { this.props.slide.body }
    </p>
    <TransitionGroup { ...transitionProps } >
      { tiles }
    </TransitionGroup>
    <button ref="continue" className={ buttonClasses } onClick={ 
  this.onContinue }>{ this.props.slide.continue }</button>
  </div>
  )
  }

render（）{
让tiles=this.props.slide.answers
.map（（答案、索引）=>{
让id='答案'+索引
返回
})
let buttonClasses=类名（'Btn'，'Btn--isOrange'，'Btn--
isContinue'{
“u-transparent”：！this.state.complete
})
返回(

{this.props.slide.body}

{tiles}
{this.props.slide.continue}
)
}

您需要手动插入换行符：

let tiles = this.props.slide.answers
  .map( ( answer, index ) => {
    let id = 'answer' + index
    let tile = <Tile
      key={ id }
      id={ id }
      value={ answer.value }
      text={ answer.text }
      selected={ this.selected.has( id ) }
      onClick={ this.onTileClick }
    />
    return index == 1 ? [tile, <br/>] : tile;
  })

let tiles=this.props.slide.answers
.map（（答案、索引）=>{
让id='答案'+索引
让瓷砖=
返回索引==1？[tile，
]：tile；
})

---

这将把

[tile，tile，tile]

变成

[tile，
]，tile，tile]

你能显示你现在使用的代码吗？你能显示一些代码吗？代码已添加。我不是react master，所以我对上面的意思知之甚少。我们需要父组件的代码，即呈现

实例的组件。我不知道您指的是什么。这是一个很棒的答案，非常感谢。工作得很有魅力。你们太棒了，太可爱了。

let tiles = this.props.slide.answers
  .map( ( answer, index ) => {
    let id = 'answer' + index
    let tile = <Tile
      key={ id }
      id={ id }
      value={ answer.value }
      text={ answer.text }
      selected={ this.selected.has( id ) }
      onClick={ this.onTileClick }
    />
    return index == 1 ? [tile, <br/>] : tile;
  })