使用key创建React元素

Question

我试图在没有JSX的情况下渲染一个React组件数组，并设置键（keys）。不幸的是，当我尝试设置数组内的键时，遇到了JavaScript错误：

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中添加key的示例。

注意：这个渲染得很好；问题不在组件渲染上，而是在能否添加创建元素的key上。

- eagercoder

---

据我所知，key 是一个属性，因此我认为类似 React.createElement(children[i], {key: i}) 这样的代码可以起作用。 - zzzzBov

搞定了。谢谢zzzzBov。 - eagercoder

Answer 1

正如zzzzBov在评论中提到的那样，key是一个属性，可以作为对象的第二个参数传递给createElement。

示例

mapChildObjects = () => {
    const { children } = this.props;

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

- Gaʀʀʏ

---

关于写作的内容。 - zzzzBov