Question

class Home extends React.Component { 
     render() {
        const array = [<Hello />,<Hello />,<Hello />]
        return {array.map((item) => {
            return item
        })}
     }
}

我已经得到了上面的代码以及如何渲染已经有React组件的数组。它可能或者可能还有其他方法解决这类问题吗？

Answer 1

您应该在使用{...}返回后替换(...)包装，或省略它。然而，正如各种评论所述，一个简单的return array;就足够了。以下代码应该可以为您提供所需的结果。

class App extends React.Component {
  render() {
    const array = [
      <Hello name="John" />,
      <Hello name="Max" />,
      <Hello name="Alex" />
    ];

    return array;
  }
}

修改请注意，以下表示法（直接返回数组）仅适用于React 16，以前的版本需要使用<div>或<span>元素进行换行（感谢@BrianGenisio提示）。

要获得更多互动模式，请查看 sandbox

是否可以渲染组件数组？

1 个答案: