两个子组件之间的接线

Question

我正在学习React，我有一个具体的示例，试图通过接口将两个组件连接在一起。 我已经阅读了大多数父/子，子/父母和同级组件通信stackoverflow相关的问题，似乎找不到合适的答案。

说我有一个呈现Box和Mover组件的App组件。 简而言之，Box有一个move（x，y）函数，我希望Mover与之交互。 但是，Mover不必一定是Box的子级（或任何其他关系），特别是我不希望Box将自己的方法传递给Mover。

我想要在App中执行的操作如下：

...
render: function() {
    return (
        <Box ref="box"/>
        <Mover box = {this.refs.box} />
    )
}
....

但是，您不能像在文档中明确指出的那样在render（）中使用refs，并且无论如何都不会定义box refs，直到它被安装（所以box props不会起作用）。

我想过要使用一个中间对象：

...
render: function() {
    var api = {box: undefined};
    return (
        <Box api={api}/>
        <Mover api={api} />
    )
}
....

Box在其componentDidMount方法中的this.props.api中设置自己，但这有点不可靠。 另一个选择是使用App中的refs回调进行连接，但这需要难看的粘合代码。

呈现它们时，还有其他方法可以在彼此之间传递对（尚未创建的）组件的引用吗？ 还是我不遵守一些更一般的设计原则？

Answer 1

对于兄弟姐妹，您通常需要将它们都需要引用的任何状态上移到一个公共父组件中，然后将其作为道具传递（或横向传递到一个外部存储对象中-有关示例，请参见react-training的Less Simple Communication课程），然后传递它作为道具。

例如，如果组件渲染Box和Mover具有以下状态：

getInitialState: function() {
  return {
    x: 0,
    y: 0
  }
}

然后，您可以通过Mover回调函数来对其进行更新：

handleMove: function(x, y) {
  this.setState({x: x, y: y})
}

// within render() - you could also pass x and y if Mover needs them
<Mover onMove={this.handleMove}/>

// within Mover
this.props.onMove(newX, newY)

如果您将此状态作为道具传递给Box ，则不一定需要显式的move()方法（取决于它的作用），但可以在其render()方法中使用道具render()当道具更改），或者您可以通过componentWillReceiveProps()方法检测更改来对x和y值更改做出反应：

// within render()
<Box x={this.state.x} y={this.state.y}/>

// within Box
componentWillReceiveProps: function(nextProps) {
  if (nextProps.x !== this.props.x || nextProps.y !== this.props.y) {
    // ...
  }
}