如何在非父母子女反應組件之間共享數據？

在兒童 - 父母關係中組件之間共享數據的過程已有詳細記錄，並且可以直接在React文檔中處理。不太明顯的是如何共享不共享父子關係的組件之間的狀態和任意數據。 Flux作爲一種解決方案提供，過去我已經推出了自己的pub/sub系統，但在這個領域仍然存在着reactjs開發人員之間的巨大分歧。 RxJS已經作爲一個解決方案提供，並且在觀察者模式上提供了許多變體，但是我想知道是否有更加規範的方式來管理這個問題，特別是在組件不太緊密的大型應用程序中。如何在非父母子女反應組件之間共享數據？

來源

2016-02-26 sjt003

我的解決方案通常是將回調作爲道具傳遞給將接受用戶輸入的組件。該回調會執行父項中的狀態更改，該更改會向下傳播。例如：

UI = React.createClass({ 
    getInitialState() { 
    return { 
     text: "" 
    }; 
    } 

    hello(text) { 
    this.setState({ 
     text: text 
    }); 
    } 

    render() { 
    return (
     <div> 
     <TextView content={this.state.text}> 
     <Button onclick={() => this.hello("HELLO WORLD")}> 
     </div> 
    ); 
    } 
}); 
// TextView and Button are left as an exercise to the reader

我喜歡這個，因爲每個家長成分仍然是唯一負責其內容和子組件不侵入知道對方的任何事情;這都是回調。不可否認，大規模的反應的應用程序，但我喜歡沒有一個全球事件調度管理一切，使控制流很難遵循。在本例中，UI類將始終是完全自包含的，並且可以根據需要進行復制，而不存在名稱重用的風險。

編輯：

下面是示出部件之間的更直接的關係的例子。它基本上是一樣的，因爲父母仍然必須促進這種關係。我更喜歡前面的例子，因爲我更喜歡帶有道具的小零件，而不是任何可能的狀態。

UI = React.createClass({ 
    render() { 
    textView = <TextView>; 
    return (
     <div> 
     {textView} 
     <Button onclick={() => textView.setText("HELLO WORLD")}> 
     </div> 
    ); 
    } 
}); 
// TextView and Button are left as an exercise to the reader. 
// TextView is presumed to have a setText method, which internally calls 
// this.setState(...)

來源

2016-02-26 20:10:17 Lucretiel

這是不是還不是親子關係？如果有兩個'''UI'''''「父母」組件，都意味着保持同步，都與他們自己的孩子？你能否更新你的例子？ – sjt003

@ sjt003好了，在這個例子中，它是有關係的Button和TextView。父母的工作是建立和促進這種關係。在你的例子中，如果你有兩個需要通信的UI組件，你可以把它們放在一個設置通信的父項下。我已經更新了與Button和TextView有更直接的關係的示例 - Button接收直接調用TextView的setText方法的回調。但是，我通常會發現，儘可能將圖上的狀態提高一些，道具較低。 – Lucretiel

@ sjt003我的哲學談到React的時候，一切可見都應該用道具和狀態來管理。如果兩個遙遠的組件共享一些狀態並需要保持同步，那麼該狀態應該存在於其父節點中。大多數React應用程序都有一個頂級父組件，可以在該狀態下運行。你可以用一個例子來更新你的問題：一個例子中兩個組件完全獨立，而且它們不在單個父代之下？ – Lucretiel

如何在非父母子女反應組件之間共享數據？

回答

相關問題