React，你能用 Array(n).fill(0).map 做一个元素数组吗？

Question

似乎你不能，但我无法确定原因。

这是导致问题的代码：

class App extends React.Component {

  render() {

    var elems = Array(~~(this.props.number)).fill(0).map( ()=> <div>test</div>);

    console.log(elems); //(5) [Object,Object,Object,Object,Object]

    return (
      {elems}
    )
  }
}

ReactDOM.render(<App number='5' />, document.querySelector('#app'))

错误将我指向文档中的一个页面，该页面显示“必须返回有效的 React 元素（或 null）。”

我按照这里的例子

https://facebook.github.io/react/docs/lists-and-keys.html (Basic List Component)

那是使用数组，所以它可能，但不知何故挖掘不同。

Answer 1

正如@Andrew Li 指出的那样，原始代码返回了一个非 React Element 对象，这是错误的根源。 React 期望返回一个对象，但类型 {elems: elems} 无效。

React 组件只能（当前）返回单个元素（请参阅React Component docs 中的警告）而不是数组。用父母包装你的数组应该可以解决问题。

class App extends React.Component {

  render() {

    var arr = Array(~~(this.props.number)).fill(0).map( ()=> <div>test</div>);

    return (
      <div>
        {elems}
      </div>
    )
  }
}