在顶级 React 组件中共享状态

Question

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

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

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

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

Answer 1

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

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

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

查看 React 文档或观看此视频 https://www.youtube.com/watch?v=dcCcZ1IWZ6w

Answer 2

如果你只是想在没有 redux 的情况下开始使用 react，你可以通过分享来实现，例如rx 库中的事件发射器或 Subject，以便将事件从 ne 组件传递到另一个组件。然后的想法是

创建事件调解器
将其传递给两个组件
向事件调解器注册，以便在新的 message/event 上您可以相应地调用 setState。

Answer 3

您可以使用面向事件的编程 (pub/sub) 在没有相同父对象的组件之间进行通信。

mufa 完成 event-driven 的工作。

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

与 Event-driven 反应的一般规则：

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 组件中共享状态

Share state in top level React components

javascript

reactjs

mufa

与 Event-driven 反应的一般规则：