请容忍我对 React 的有限了解，因为我最近才开始学习它。
我在反应组件中编写了此代码片段 -
this.headerArr= this.props.headerList.map((item,index)=>(
<th key={index}>
{item}
</th>
));
这个想法是循环遍历“headerList”数组的每个元素并从中创建一个元素。
如果我在普通的 javascript 环境（例如 chrome devtools 控制台）中编写上述相同的代码，它甚至不会编译（因为 'th' 标志）。
同一个map函数如何创建一个对象数组并返回到'headerArr'。生成的数组看起来有神秘元素 -
Object {$$typeof: Symbol(react.element), type: "th", key: "1", ref: null, props: Object, …}
究竟发生了什么？我在反应文档中找不到参考。
发生这种情况是因为您混合了 HTML（th 标签）和 JavaScript。正如您意识到的那样，通常这在 javascript 中是不可能的。React 使用称为JSX ( details )的扩展语法，使您能够混合 HTML 和 JS。
React 会在每个 JSX 标签上自动调用 React.createElement。这会创建特殊对象（React.element 类型），这些对象具有 React 对象具有的所有典型属性（例如键、引用、道具等）（更多细节）。通常这是想要的行为，例如，如果您在渲染函数中重新使用 this.headerArr。例如render() return( <div>{this.headerArr}</div> )
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句