反应创建元素与键

Question

我正在尝试使用键渲染一个没有JSX的反应组件数组。问题 不幸的是，当我尝试在数组中设置键时，我正在处理 JS 错误：

Uncaught (in promise) TypeError: Cannot assign to read only property 'key' of object '#<Object>'

这是代码：

import React, { Component } from 'react';
class Test extends Component {
  mapChildObjects = () => {
    const { children } = this.props;
    let arr = [];
    for (let i = 0; i < children.length; i++) {
      arr.push(React.createElement(children[i]));
      arr[i].key = i;
    }
    return arr;
  }
  render() {
    return (
      <div>
        <div className={s.content}>
          {this.mapChildObjects()}
        </div>
      </div>
    );
  }
}

export default Test

阅读文档后：https://reactjs.org/docs/react-without-jsx.html，但找不到在createElement中添加密钥的示例。

注意：这很好;问题不在于组件的渲染，而在于添加创建元素的键的能力。

Answer 1

正如zzzzBov在注释中提到的，key是一个道具，可以作为createElement的第二个参数传递到对象内部。

例

mapChildObjects = () => {
    const { children } = this.props;
    return children.map((child, i) => {
       return React.createElement(child, {key: i});
    });
  }