相关疑难解决方法(0)

我正在尝试找到正确的方法来定义一些可以通用方式使用的组件:

<Parent>
  <Child value="1">
  <Child value="2">
</Parent>

当然,父级和子级组件之间的渲染有一个逻辑,你可以想象<select>并<option>作为这种逻辑的一个例子.

对于问题,这是一个虚拟实现:

var Parent = React.createClass({
  doSomething: function(value) {
  },
  render: function() {
    return (<div>{this.props.children}</div>);
  }
});

var Child = React.createClass({
  onClick: function() {
    this.props.doSomething(this.props.value); // doSomething is undefined
  },
  render: function() {
    return (<div onClick={this.onClick}></div>);
  }
});

问题是每当你{this.props.children}用来定义包装器组件时,如何将一些属性传递给它的所有子组件？

我有一个组件需要在某个时候读取属于其子节点的状态变量.
这个特定的状态变量是否应该移动到父级,并通过回调进行更改？

正如我所看到的,其中一些可能是错误的,这些是将状态移至父母的利弊:

Pro: 这似乎更多地遵循反应的单向数据流咒语.

Con:父母的其他孩子将在状态变化时被重新渲染(不是在真正的DOM中,但它可能仍会对性能产生影响).

这里的最佳做法是什么？