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 documentation：

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

为此你必须键入你的孩子元素，比如vkurchatkin说：

当React协调键控子项时，它将确保任何具有键的子项将被重新排序（而不是被破坏）或被销毁（而不是重用）。

动态地将任意类型的子项添加到React组件

1 个答案: