兩個子組件之間的接線

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) {
    // ...
  }
}