兩個子組件之間的接線

我在學習React，我有一個試圖通過接口將兩個組件連接在一起的特定示例。我已閱讀了大部分父/子，子/父和兄弟組件通信stackoverflow相關的問題，似乎無法找到合適的答案。假設我有一個呈現Box和Mover組件的App組件。很簡單，Box有一個移動（x，y）函數，我希望移動器能夠進行交互。但是，移動者不一定是Box（或任何其他關係）的子女 - 具體而言，我不希望Box將自己的方法傳遞給移動者。兩個子組件之間的接線

我想在App做的，是這樣的：

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

但是，你不能用在裁判渲染（），如文檔和箱裁判ISN明確表示不管怎樣，直到它被安裝（所以箱子道具將無法工作）。

我想過使用中間對象：

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

凡盒套本身在this.props.api在其componentDidMount方法，但是這是一個有點玄乎。另一種選擇是使用應用程序中的refs回調進行連線，但這需要難看的膠水代碼。

當渲染它們時，是否有任何其他方式將引用傳遞給（但未創建的）組件？還是有一些我不遵守的更一般的設計原則？

來源

2015-03-31 jfdno

我認爲總的想法是一個函數傳遞給從父下降到框。然後Box會調用該回調，以便父母可以影響Mover。 – 2015-03-31 14:32:54

'var box = ;返回（

{ box }

）;' – WiredPrairie 2015-03-31 14:35:14

@WiredPrairie我居然試過這個，但是在Mover裏面我似乎無法調用box.move（）。調試表明該框是ReactElement的一個實例，並沒有移動方法。 – jfdno 2015-04-01 01:11:54

對於兄弟姐妹，您通常需要將他們都需要的狀態移動到共同的父組件中，然後將其作爲道具傳遞（或橫向放入外部存儲對象 - 請參閱反應培訓的示例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()方法中的道具（當道具更改時會自動重新渲染），或者可以對x和做出反應個值通過檢測與componentWillReceiveProps()方法的改變而改變：

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

來源

2015-04-01 11:50:49

兩個子組件之間的接線

回答

相關問題