Question

首先，我是ReactJS的新手。我做了很多搜索，但我找不到这个问题的答案。也许这很简单......

我需要在ReactJS中的独立组件之间进行通信。想象一下，我的应用程序无法控制调用它的网页中的“父”组件，并且该应用程序具有以下内容：

class Widget1 extends React.Component {
  render(){
    return <button>Update Widget 2</button>
  }
}

class Widget2 extends React.Component {
  render(){
    return <textarea></textarea>
  }
}

ReactDOM.render(<Wiget1 />, document.getElementById('widget1'));
ReactDOM.render(<Widget2 />, document.getElementById('widget2'));

HTML看起来像：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Setup</title>
    </head>
    <body>
        ...SOME OTHER HTML
        <div id="widget1"></div>
        ...SOME OTHER HTML
        <div id="widget2"></div>
        ...SOME OTHER HTML
    </body>
</html>

当没有共享父级时，是否可以让这些组件相互通信？

例如，只是将Widget 1中按钮的值传递给Widget 2 textarea。显然，这根本不是我最后所做的，但它是朝着那个方向发展的。

感谢。

Answer 1

如果数据可以从<Widget1/>流向<Widget2/>，那么它们就不是完全独立的，可以是一个<ParentComponent/>的孩子。

但是，如果您仍希望在保持这些<Widget/>独立的同时进行沟通，则可以在Flux Architecture之后轻松实现这一目标。

您的小部件可以收听公共存储。当您单击<button/>中的<Widget1/>时，它会触发一个ACTION，它会更新Store中变量的值。小部件（<Widget1/>和<Widget2/>）都会在同一商店商店中收听更改，并会在商店更新后自行更新。

//Widget    
class Widget extends React.Component{
  componentWillMount(){
    Store.addChangeListener(this.handleStoresChanged);
  }
  componentWillUnmount(){ //removeChangeListener }
  handleStoresChanged(){
    let newCount = Store.getNewCount();
    this.setState({ count: newCount });
  }
  addCount(){
    dispatch('ADD_2', {});
  }
  render(){
   return(
    <div>
      <button onclick={this.addCount.bind(this)}>Add 2 to count</button>
      {this.state.count}
    </div>
   )
  }
}

// Widget1 and Widget2 would have the same structure and can extend the above class

然后，Store会监听ADD_2操作，然后将2添加到商店内名为_count的变量中。此商店中的getNewCount()函数将返回_count变量的值。由于两个窗口小部件都在监听同一个商店，因此单击任何窗口小部件上的按钮的操作将更改商店，此更改将反映在两个窗口小部件中。

Answer 2

当然，您的组件应以某种方式进行通信。

Parent -> Child沟通完成了道具。孩子的行为符合父母提供的行为。

Child -> Parent与（surprize！）属性进行通信。

例如：

//Parent's render method
return (
    <div>
      <Child someEventHandler={(e)=>{console.log('Some event happened!')}}
    </div>);
// ...
// Child render method
return (
    <div>
      <button onClick={(e)=>{if(typeof this.props.someEventHandler === 'function'){this.props.someEventHandler()}}}>
          I trigger some event!
      </button>
    </div>
);

您的子组件知道如何处理某些事件（Click，DoubleClick等等）并触发从父props获取的处理程序。这个概念允许我们重用低级（aka dumb）组件。例如，您可以实现<SearchField onSubmit={...} onReset={...} />组件之类的内容，并将其呈现在应用程序的不同位置，但会传递不同的onReset和onSubmit回调。

此外，您的组件可以与refs进行通信。例如：

// Parent's render method
return (
  <div>
    <Child1 onSomeEvent={(e)=>{this.refs.child2.someMethod(e)}}
    <Child2 ref="child2"/>
  </div>
);

当您执行<Child2 ref="child2"/>之类的操作时，在某些父组件中，对Child2实例的引用会被放入Parent.refs.child2，您可以直接调用＆＃34; public＆＃34; Child1的方法。

React太棒了！祝你好运！

Sinclerely，

阿列克谢

你是如何在ReactJS中做到这一点的？

2 个答案: