如何根据通过props传递的值在React中创建多个标签

Question

如何根据在props或初始状态中传递的值创建多个元素。

constructor(props, context) {
    this.state = {
        numberOfElements: this.props.numberOfElements || 6
    }

render() {
    return (
        <div>
            {/*Six elements if not passed through props*/}
            span
            span
            ...
            span
        </div>
   )
}

是否有React.method可用于此目的？

Answer 1

使用元素数组来呈现多个元素

constructor(props, context) {
    this.state = {
        numberOfElements: this.props.numberOfElements || 6
    }

renderElements(){
  let elements = [];
  let total = this.props.numberOfElements || this.state.numberOfElements;
  for(let i = 0;i < total;i++){
     elements.push(<span>Hello</span>)
  }
  return elements;
}

render() {
    return (
        <div>
            {this.renderElements()}
        </div>
   )
}

Answer 2

您应该使用数组来迭代和创建元素。 一种方法可能是：

render() {
    const myArray = new Array(this.state.numberOfElements).fill('bar'); //  array with 6 members ("bar")
    return (
        <div>
            {myArray.map(i=><span>foo</span>)}
        </div>
   )
}

运行示例：

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      numberOfElements: this.props.numberOfElements || 6
    }
  }
  render() {
    const myArray = new Array(this.state.numberOfElements).fill('bar');
    return (
      <div>
        {myArray.map(i => <div>foo</div>)}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 3

这可能是ES6中最干净的一个

render() {
    return (
        <div>
            {[...Array(4).keys()].map(i => <span key={i}/>)}
        </div>
   )
}