用键反应创建元素

时间:2019-04-29 18:58:42

标签: javascript reactjs

我正在尝试在不带键的JSX的情况下呈现一组React组件。问题不幸的是,当我尝试在数组内部设置键时,我正在处理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内添加密钥的示例。

注意:这很好。问题不在于组件的呈现,而在于添加创建要素的键的功能。

1 个答案:

答案 0 :(得分:4)

正如评论中的zzzzBov所述,key是一个道具,可以在对象内部作为createElement的第二个参数传递。

示例

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

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