獲取子組件的狀態

我正在使用react-draggabe。我喜歡將功能添加到子組件的想法，方法是將其包裝到另一個組件中，如<Draggable>。這個組件管理自己的狀態很酷。這樣我就不必關心任何事情。獲取子組件的狀態

但是：我需要在事件發生時獲取拖動元素的當前位置（例如，用戶單擊另一個子組件中的某個按鈕）。我知道我可以使用onStop處理程序並在父elemet的狀態中保存新位置。但這是一個問題：我複製可拖動組件的狀態，因爲我也將它保存在父項中。我不想那樣做。

這樣做的反應方式是什麼？
我是新來的rect和這個想法，所以我會感謝一個很好的解釋。

來源

2016-08-24 Fuzzyma

你可以用refs做到這一點：

var Foo = React.createClass({  
    componentDidMount() { 
    console.log(this.refs.bar.baz) // "qux" 
    }, 
    render() { 
    return (
     <div> 
     <Bar ref="bar" /> 
     </div> 
    );  
    } 
}); 



var Bar = React.createClass({ 
    getInitialState: function() { 
    return {baz: 'qux'}; 
    } 
});

我已爲你fiddle與訪問狀態形成子組件的一個例子。有一個組件遞增一個值，它的兄弟組件會呈現它，通過props/refs從它們的父組件訪問此值。

來源

2016-08-24 15:58:03

看起來像父母 - >孩子關係的一個很好的解決方案，但是當你有父母 - >孫子和更深的時候會變得複雜。但是：這以優雅的方式解決了我的問題。謝謝！ – Fuzzyma

對於這些更復雜的場景，我想你會想使用狀態管理庫，如Redux或Mobx。 – AMilassin

是的，既然你提到你不需要在組件樹中傳遞太深的數據，我建議你使用最簡單的解決方案。如果事情變得複雜，你可以使用商店或「上下文」（不推薦，這是一個實驗性功能）。 –

獲取子組件的狀態

回答

相關問題