为什么这个.props.children.map不起作用？

Question

我已经在其他几个组件中编写了这段代码，但似乎无法理解为什么它不起作用。

{
    this.props.children.map(function(child) {
        return <li>{child}</li>
    })
}

非常感谢您的帮助！

- epicsharp

---

定义“isn't working”。 - Dave Newton

你没有在任何地方分配此调用的结果。所以它“工作”，但你没有检查它是否有效。 - zerkms

它返回 Uncaught TypeError: undefined is not a function。 - epicsharp

好的，你的 this.props.children 不是一个数组（或者不是另一个具有 map 属性的对象）。 - zerkms

你是否尝试过使用React.Children.map？https://facebook.github.io/react/docs/top-level-api.html - WiredPrairie

Answer 1

this.props.children 是一个不透明的数据结构，它可以是数组或单个元素。在你的情况下，this.props.children 可能是单个元素，这就是为什么 .map() 方法未定义的原因。

当操作 children 属性时，应使用 React.Children API。

另请参阅Children props 的类型。

---

- Alexandre Kirszenberg

Answer 2

你可以通过使用展开运算符来绕过这个问题。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax

[...this.props.children].map(function(elem) {
    console.log(elem);
});

- TaekYoung

---

这个答案是不正确的。当children不是数组时，这将导致运行时错误；而当children已经是一个数组时，将其展开到一个新创建的数组中是一种无用的活动，你可以直接在children上调用.map()。 - Martin

Element.children是HTMLCollection，HTMLCollection是类似于arguments的类数组对象，所以HTMLCollection没有直接的map方法，这就是为什么我首先将其转换为数组的原因。 - TaekYoung