javascript - ReactJS 不接受将数组映射到模板的渲染

Question

在一个 react ​​组件中，我将一个简单的数组映射到一个组件，例如:

render() {
    return <div>10</div>
}

上面的代码工作正常，但下面的代码不起作用:

render() {
    var array = [1,2,3,4]
    return array.map((i) =><div key={i}>{i}</div>)
}

但是如果我用 <div> 包围它标记它有效。

render() {
    var array = [1,2,3,4]
    return <div>{ array.map((i) =><div key={i}>{i}</div>)}</div>
}

如何避免使用 <div>标记并仍然让它工作？

Answer 1

我相信你还没有使用 React v16。在 React v16 之前你不能返回一个元素数组:https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings

这就是为什么您必须用 div 或其他单个元素包装您的返回。