在合成組件中，子代如何訪問最頂層的狀態屬性

爲了簡化，我有一個包含子組件的組件。頂級父組件是唯一的有狀態組件。但是這種狀態需要在深處的兒童身上設定。這些孩子怎麼能進入最頂級父母的狀態呢？在合成組件中，子代如何訪問最頂層的狀態屬性

是向下傳遞的狀態通過props的唯一途徑？我問，因爲我有一個內部擁有很多孩子的組合，所以要進入狀態，我必須將狀態作爲一個道具傳遞到5個等級，這樣才能讓第5個等級進入狀態。

對於一個簡單的例子：

var Timer = React.createClass({ 
    getInitialState: function() { 
    return {secondsElapsed: 0}; 
    }, 
    tick: function() { 
    this.setState({secondsElapsed: this.state.secondsElapsed + 1}); 
    }, 
    componentDidMount: function() { 
    this.interval = setInterval(this.tick, 1000); 
    }, 
    componentWillUnmount: function() { 
    clearInterval(this.interval); 
    }, 
    render: function() { 
    return (
     <Label /> 
    ); 
    } 
}); 

var Label = React.createClass({ 
    render: function() { 
    return (
     <div>Seconds Elapsed: {this.state.secondsElapsed}</div> 
    ); 
    } 
}); 

ReactDOM.render(<Timer />, mountNode);

這個例子給出了this.state is null

來源

2015-12-14 Noitidart

有總體來說，兩個廣爲接受的方式來做到這一點。

事實上通過性能下降組件的樹。這有時可以很好地工作，並且我個人在組件中使用了更多的UI工作，例如確保分頁在整個應用程序（總頁數，當前頁數，每頁數量）中普遍適用。欲瞭解更多的應用程序「狀態」之類的東西，這是一般不是正確的方法
切換到的東西來管理你的應用程序的狀態，如Flux，這將有助於你與商店的概念來保持這種狀態，如果兩個組件需要這個。我使用alt實現，但Facebook's official和其他的也是非常知名的。

總的來說，我建議你稍微瀏覽一下React和Flux的一些視頻，也許是人們告訴你他們是如何做某些事情的。例如this一。

來源

2015-12-14 22:42:47

啊！通量看起來不錯。我認爲這會帶來很多麻煩，因爲我需要生成和維護尊重單個狀態對象的多個組件。 Flux是實現這個目標的方式嗎？因此，這將是2只1石的鳥類，它可以處理深層的孩子，並且還可以在克隆組件中保持狀態？ – Noitidart

正確，你可以看到它幾乎是某種單件，組件可以用作'道具'，所以你沒有任何地方的大量依賴。我不再構建任何React應用程序了！ –

非常感謝。我看着它，但遇到了一些困難。你可以在jsfiddle中使用Flux來顯示一個商店，然後創建三個'hello blah'，divs，其中blah是狀態。我無法弄清楚這是什麼「Fluxy」，我只是繼續製作一個全局對象，並設置狀態。我可以提出另一個問題，我應該這樣做嗎？ – Noitidart

可以使用發生反應被稱爲「上下文」稍微實驗性功能下降通過國家到任意深度。

他們有a page detailing it。注意頂部的警告，因爲這隻能用於特殊情況。

嘗試或許重構或提前考慮使用上下文時，因爲它們可能導致其承擔一定的上下文您創建子，這限制了它們的可重用性。

來源

2015-12-14 22:44:04 enjoylife

這非常有趣！非常感謝你馬特！ – Noitidart

在合成組件中，子代如何訪問最頂層的狀態屬性

回答

相關問題