与事件驱动的反应的一般规则：

Question

我需要在页面的不同部分使用反应，但共享相同的状态，所以我在顶层做了这个：

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

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

主要代码是＆＃34; App＆＃34;但是如何将状态发送到＆＃34; Dragbar＆＃34;？（我只需要发送它没有设置）。这是我需要开始学习redux等的地方吗？我刚刚开始学习React，所以还没看过其他的图书馆。 P

Answer 1

使用redux可以帮助您在整个应用程序中共享一个状态，而无需考虑要传递哪些数据，哪些数据不通过。如果你想将数据传递给没有redux的孩子，你可以这样：

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

在您的组件中，您可以使用此数据{this.props.someData}

查看反应文档或在此视频中https://www.youtube.com/watch?v=dcCcZ1IWZ6w

Answer 2

如果你只想在没有redux的情况下做出反应，你可以通过分享例如来自rx库的事件发射器或Subject，以便将事件从ne组件传递到另一个组件。那个想法是

创建活动中介
将其传递给两个组件
向活动调解员注册，以便在新消息/事件发生后，您可以相应地致电setState。

Answer 3

您可以使用面向事件的编程（pub / sub）在不具有相同父级的组件之间进行通信。

mufa完成了事件驱动的工作。

我有一个答案here，其中有一个MUFA示例，我将在下面写一个符合您要求的示例：

与事件驱动的反应的一般规则：

publish (fire)：在事件处理程序中调用。
subscribe (on)：在componentDidMount。
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>

在顶级React组件中共享状态

3 个答案:

与事件驱动的反应的一般规则：