动态向React组件添加任意类型的子代

Question

我正在使用react-art制作一个小应用，其中用户可以在运行时添加/删除许多不同的形状。

下面概述了我的想象方式。 注意：ES6语法。

顶层画布，带有表示形状及其当前状态（例如位置）的对象的列表：

class Canvas extends React.Component {

  constructor(props) {
    super(props); // includes list of shapes
  }

  render() {
    return (
      <Surface>
        // my shapes here
      </Surface>
    );
  }
}

许多不同形状的React组件：

class SimpleShape extends React.Component {

  constructor(props) {
    super(props); // includes e.g. position of shape
  }

  render() {
    <Circle />
    <Rectangle />
  }
}

我正在考虑在Canvas组件中执行以下操作来渲染形状：

render() {
  return (
    <Surface>
      this.props.shapes.map(function(shape) {
        return React.createElement(shape.component, shape.props);
      });
    </Surface>
  );
}

我一直找不到一个示例，其中React组件的子代数量和类型是动态的。 几乎感觉就像我通过将子组件作为道具传递来与React方法作斗争，但我想不出另一种方法。

我的问题是，惯用的React方法是什么？ 有没有更好的方法来实现我要完成的任务？

_{我希望这不是讨论问题！}

Answer 1

我认为您的方式是React的方式，基于此React文档 ：

  render: function() {
    var results = this.props.results;
    return (
      <ol>
        {results.map(function(result) {
           return <li key={result.id}>{result.text}</li>;
        })}
      </ol>
    );
  }

为此，您必须键入子元素，例如vkurchatkin说：

当React调和带键的子代时，它将确保所有带键的子代都将重新排序（而不是破坏）或销毁（而不是重用）。