Javascript 动态创建React组件

我正在和React建立一个新项目。我有一个组件，它定义了几个子组件，如下所示：

class TimeStepDisplayGraph extends React.Component {

  render () {
      return <div id={ this.props.id }>
             <TimeStepDisplayGraphNode class="graphNodeStyles"/>
             <TimeStepDisplayGraphNode class="graphNodeStyles"/>
             <TimeStepDisplayGraphNode class="graphNodeStyles"/>
             <TimeStepDisplayGraphNode class="graphNodeStyles"/>
             <TimeStepDisplayGraphNode class="graphNodeStyles"/>
             <TimeStepDisplayGraphNode class="graphNodeStyles"/>
             </div>;
    }
  }

类TimeStepDisplayGraph扩展了React.Component{
渲染（）{
返回
;
}
}

现在理想情况下，我想做的不是明确定义创建的节点数，而是通过如下调用：

function createGraphNode() {
  return React.createElement( <TimeStepDisplayGraphNode class="graphNodeStyles"/>);
}

函数createGraphNode（）{
返回React.createElement（）；
}

---

我打了x多次。这似乎是一件非常简单的事情，我相信我会因为自己的愚蠢而责备自己，但现在我真的不知道该怎么做。任何帮助都将不胜感激。

有很多方法可以做到这一点。最简单的方法是简单地创建一个大小为

n

的数组并映射到该数组上，为每个数组返回一个React组件：

render () {
  const arr = new Array(6);
  return (
    <div id={ this.props.id }>
      {arr.map((ea, i) => {
        return <TimeStepDisplayGraphNode key={i} class="graphNodeStyles"/>
      }}
    </div>
  );
}

render（）{
const arr=新阵列（6）；
返回(
{arr.map（（ea，i）=>{
返回
}}
);
}

请注意，您需要将

键

道具添加到每个创建的节点，以便在渲染之间对其进行唯一标识。使用

i

通常并不理想（因为它实际上并不唯一标识哪个节点是哪个节点），但在没有任何其他标识数据的情况下，它会这样做

---

这是React中非常常见的模式-有关更多信息，请参阅。

是的，穆罕默德是对的。这是如何使用循环来完成您的请求：

class outerComponent extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      numberOfTimestamps: 100000  // (just kidding, make that smaller!)
    }
  }
  render () {
    let myTimestamps = []
    for (let i=0; i < this.state.numberOfTimestamps; i++) {
      myTimestamps.push(<TimeStepDisplayGraphNode class="graphNodeStyles"/>)
    }
    return (
      <div>
        {myTimestamps}
      </div>
    )
  }
}

类outerComponent扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
numberOfTimestamps:100000/（开个玩笑，把它弄小一点！）
}
}
渲染（）{
让我的时间戳=[]
for（设i=0；i

---

编辑：更改为for循环，而不是forEach。无法forEach数字！

您可以按照自己的想法将其放入函数中，但不需要

React.createElement

。类似这样的内容就足够了：

class TimeStepDisplayGraph extends React.Component {
  ...
  render () {
      return (
        <div id={ this.props.id }>
          {createGraphNode()}
        </div>
      )
    }
  }
  ...
}

function createGraphNode() {
  return <TimeStepDisplayGraphNode class="graphNodeStyles"/>;
}

---

这就是您的想法吗？

如果您知道需要添加该组件多少次，那么只需使用循环或映射函数并返回元素。数字上没有

forEach

。这是不正确的。（现在您可以编辑它了。）

class TimeStepDisplayGraph extends React.Component {
  ...
  render () {
      return (
        <div id={ this.props.id }>
          {Array.from({ length: n }, createGraphNode)}
        </div>
      )
    }
  }
  ...
}

function createGraphNode(_, index) {
  return <TimeStepDisplayGraphNode key={index} class="graphNodeStyles"/>;
}