Question

由于我对React的了解有限，所以我直到最近才开始学习它。

我在react组件中编写了此代码段-

this.headerArr= this.props.headerList.map((item,index)=>(
<th key={index}>
{item}
</th>
));

这个想法是循环遍历“ headerList”数组的每个元素并从中创建一个元素。

如果我在普通的javascript环境中（例如chrome devtools控制台）编写了与上述相同的代码，则它甚至都不会编译（由于'th'标志）。

同一地图函数如何创建对象数组并返回到'headerArr'。生成的数组看起来包含神秘元素-

Object {$$typeof: Symbol(react.element), type: "th", key: "1", ref: null, props: Object, …}

到底发生了什么？我在react文档中找不到参考。

Answer 1

发生这种情况是因为您正在混合HTML（th-标记）和JavaScript。通常，这是您所意识到的在javascript中无法实现的。 React使用称为 JSX （details）的扩展语法，使您可以混合HTML和JS。

React自动在每个JSX标签上调用React.createElement。这将创建具有React对象具有的所有典型属性（例如，键，引用，道具等）的特殊对象（React.element类型）（some more details）。通常，这种想要的行为，例如如果在渲染函数中重复使用this.headerArr。例如render() return( <div>{this.headerArr}</div> )

ES6映射如何在JSX中创建对象数组

1 个答案: