我有一个 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>
)
}
最佳答案
您需要手动插入换行符:
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]
关于javascript - 我如何在 react 中的循环内生成换行符?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44311109/