javascript - 我如何在 react 中的循环内生成换行符？

Question

我有一个 react 组件，我需要分成几行。我猜它会在循环返回中生成 4-5 盒 li。我想要做的是在上面放 2 个盒子，然后在下面放 3 个盒子。所以如果有 4 个盒子，它们将 2x2 堆叠在一起。如果有5个，上面2个，下面3个。

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

代码:

import React from 'react'
import classnames from 'classnames'

export default class Tile extends React.Component {
 constructor( props ) {
  super( props )
}

componentWillAppear( done ) {
// let rotateZ = `rotateZ( ${ ~~( ( Math.random() * -20 ) + 
Math.random() * 40 ) }deg )`
// let rotateX = `rotateX( ${ ~~( Math.random() * 80 ) }deg )`
// let scale = `scale( ${ .65 + Math.random() * .25 } )`
// let initialTransform = {
//   transform: `${ rotateZ } ${ rotateX } ${ scale }`
// }
// this.refs.container.style.transform = `${ rotateZ } ${ rotateX } ${ 
scale }`

this.refs.container.classList.add( 'Tile--isAppearing' )
done()
}

componentDidAppear() {
setTimeout( () => {
  // set visible and clear jitter
  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() {
// Add matrix jitter

let classes = classnames({
  'Tile': true,
  'Tile--isSelected': this.props.selected
})

return (

  <li ref="container" className={ classes } onClick={ this.onClick }>
    <span className="Tile-content">{ this.props.text }</span>
  </li>

)
  }
}

请求的第二组代码:

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

Answer 1

您需要手动插入换行符:

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

这将变成 [tile, tile, tile, tile]进入[tile, [tile, <br/>], tile, tile]