共享狀態下的反應的組分

Question

我需要用我的頁面的不同部分反應，但共享相同的狀態，所以我在頂層做出這樣的：

ReactDOM.render( 
    <App />, 
    document.getElementById('root') 
); 

ReactDOM.render( 
    <Dragbar />, 
    document.getElementById('offCanvas') 
); 

的主要代碼是「應用程序」，但我如何發送狀態到「拖杆」？ （我只需要發送它沒有設置）。這是我需要開始學習redux等嗎？我剛開始學習React，所以還沒有看過其他庫。 P

Answer 1

使用redux可以幫助您在應用程序中共享一個狀態，而不必考慮要傳遞哪些數據以及不傳遞哪些數據。 如果你想將數據傳遞給孩子，而不終極版，你可以喜歡：

<Dragbar someData=[1,2,3] /> 

，並在你的組件，你可以使用這個數據{this.props.someData}

看看反應文檔或視頻https://www.youtube.com/watch?v=dcCcZ1IWZ6w

Answer 2

如果你只是想在不使用redux的情況下做出反應，你可以通過分享來做到這一點事件發射器或來自rx庫的Subject，以便將事件從ne組件傳遞到另一個組件。我們的想法是然後

1. 創建事件調解人
2. 將它傳遞給兩個組件
3. 寄存器與事件調解人使得在一個新的消息/事件時，可以相應地調用setState。

Answer 3

您可以使用面向事件編程（pub/sub）在不同父組件之間進行通信。

mufa做事件驅動的工作。

我有一個答案here與單不飽和脂肪酸的exampe，我會寫下面符合正是您的要求爲例：

通則與之反應事件驅動：

1. publish (fire)：是稱爲事件處理程序。

2. subscribe (on)：在componentDidMount中調用。

3. unsubscribe (off)：被稱爲componentWillUnmount

const {on, fire} = mufa; 
 

 

 
class App extends React.Component { 
 

 
    state={input:""}; 
 

 
    componentDidMount() { 
 
    on('dragbar_change_state', (...args) => { 
 
     this.setState(...args); 
 
    }) 
 
    } 
 
    
 
    setStateAndFire() { 
 
    fire('app_change_state',...arguments); 
 
    super.setState(...arguments); 
 
    } 
 
    
 
    render() { 
 
    return (<div>Dragbar is saying : " {this.state.input} "</div>) 
 
    } 
 
    
 
} 
 

 
class Dragbar extends React.Component{ 
 

 
    componentDidMount() { 
 
    on('app_change_state', (...args) => { 
 
     this.setState(...args); 
 
    }) 
 
    } 
 
    
 
    setStateAndFire() { 
 
    this.setState(...arguments); 
 
    fire('dragbar_change_state',...arguments); 
 

 
    } 
 

 
    handleKeyUp(event) { 
 
    this.setStateAndFire({input: event.target.value}); 
 
    } 
 

 
    render() { 
 
    return (<div><input type="text" onKeyUp={this.handleKeyUp.bind(this)} placeholder="Write somthing here you will see it in App component" style={{fontSize:15, width: 400}} /></div>) 
 
    } 
 
} 
 

 

 

 
ReactDOM.render( 
 
    <App />, 
 
    document.getElementById('root') 
 
); 
 
ReactDOM.render( 
 
    <Dragbar />, 
 
    document.getElementById('offcanvas') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script> 
 
<script src="https://cdn.rawgit.com/abdennour/mufa/ddf78fd9/cdn/mufa-latest.min.js"></script> 
 
<h3>App Mounted in Root</h3> 
 
<div id="root" ></div> 
 
<hr /> 
 
<h3>DragBar mounted in offcanvas</h3> 
 
<div id="offcanvas" ></div>