如何在相关的react组件之间进行通信?

我刚开始使用ReactJS，我有一个问题。

我的应用程序本质上是一个带有过滤器和更改布局的按钮的列表。目前我正在使用三个组件:<list />， < Filters />和<TopBar />，现在显然，当我在< Filters />中更改设置时，我想在<list />中触发一些方法来更新我的视图。

我如何使这3个组件相互交互，或者我是否需要某种全局数据模型，我只需要对其进行更改?

当前回答

最好的方法取决于您计划如何安排这些组件。下面是我现在想到的几个例子:

<Filters />是<List />的子组件 <Filters />和<List />都是父组件的子组件 <Filters />和<List />完全存在于单独的根组件中。

可能还有其他我没有想到的情况。如果你的不符合这些要求，请告诉我。以下是我处理前两种情况的一些非常粗略的例子:

场景# 1

您可以将处理程序从<List />传递到<Filters />，然后可以在onChange事件上调用该处理程序以使用当前值筛选列表。

JSFiddle for #1 →

/** @jsx React.DOM */

var Filters = React.createClass({
  handleFilterChange: function() {
    var value = this.refs.filterInput.getDOMNode().value;
    this.props.updateFilter(value);
  },
  render: function() {
    return <input type="text" ref="filterInput" onChange={this.handleFilterChange} placeholder="Filter" />;
  }
});

var List = React.createClass({
  getInitialState: function() {
    return {
      listItems: ['Chicago', 'New York', 'Tokyo', 'London', 'San Francisco', 'Amsterdam', 'Hong Kong'],
      nameFilter: ''
    };
  },
  handleFilterUpdate: function(filterValue) {
    this.setState({
      nameFilter: filterValue
    });
  },
  render: function() {
    var displayedItems = this.state.listItems.filter(function(item) {
      var match = item.toLowerCase().indexOf(this.state.nameFilter.toLowerCase());
      return (match !== -1);
    }.bind(this));

    var content;
    if (displayedItems.length > 0) {
      var items = displayedItems.map(function(item) {
        return <li>{item}</li>;
      });
      content = <ul>{items}</ul>
    } else {
      content = <p>No items matching this filter</p>;
    }

    return (
      <div>
        <Filters updateFilter={this.handleFilterUpdate} />
        <h4>Results</h4>
        {content}
      </div>
    );
  }
});

React.renderComponent(<List />, document.body);

场景# 2

与场景#1类似，但是父组件将把处理程序函数传递给<Filters />，并将过滤后的列表传递给< list />。我更喜欢这个方法，因为它将<List />与<Filters />解耦。

JSFiddle for #2 →

/** @jsx React.DOM */

var Filters = React.createClass({
  handleFilterChange: function() {
    var value = this.refs.filterInput.getDOMNode().value;
    this.props.updateFilter(value);
  },
  render: function() {
    return <input type="text" ref="filterInput" onChange={this.handleFilterChange} placeholder="Filter" />;
  }
});

var List = React.createClass({
  render: function() {
    var content;
    if (this.props.items.length > 0) {
      var items = this.props.items.map(function(item) {
        return <li>{item}</li>;
      });
      content = <ul>{items}</ul>
    } else {
      content = <p>No items matching this filter</p>;
    }
    return (
      <div className="results">
        <h4>Results</h4>
        {content}
      </div>
    );
  }
});

var ListContainer = React.createClass({
  getInitialState: function() {
    return {
      listItems: ['Chicago', 'New York', 'Tokyo', 'London', 'San Francisco', 'Amsterdam', 'Hong Kong'],
      nameFilter: ''
    };
  },
  handleFilterUpdate: function(filterValue) {
    this.setState({
      nameFilter: filterValue
    });
  },
  render: function() {
    var displayedItems = this.state.listItems.filter(function(item) {
      var match = item.toLowerCase().indexOf(this.state.nameFilter.toLowerCase());
      return (match !== -1);
    }.bind(this));

    return (
      <div>
        <Filters updateFilter={this.handleFilterUpdate} />
        <List items={displayedItems} />
      </div>
    );
  }
});

React.renderComponent(<ListContainer />, document.body);

场景# 3

当组件不能在任何类型的父子关系之间进行通信时，文档建议设置一个全局事件系统。

2014-01-24 00:54:29

其他回答

我看到这个问题已经有了答案，但如果你想了解更多细节，组件之间的通信总共有3种情况:

案例1:父到子通信案例2:子到父通信案例3:不相关的组件(任何组件到任何组件)通信

2016-11-12 21:02:52

奇怪的是，没有人提到mobx。这个想法类似于redux。如果我有一段数据，多个组件订阅了它，那么我可以使用该数据来驱动多个组件。

2018-09-07 17:35:12

如果您想探索组件之间通信的选项，并且感觉通信变得越来越困难，那么您可能会考虑采用一种好的设计模式:Flux。

它只是一组规则，定义了如何存储和更改应用程序范围内的状态，以及如何使用该状态来呈现组件。

Flux有很多实现，Facebook的官方实现就是其中之一。虽然它被认为包含了最多的样板代码，但它更容易理解，因为大部分内容都是显式的。

其他的一些替代品是flumox, flumox和redux。

2015-12-17 15:38:45

好吧，有一些方法可以做到这一点，但我只想专注于使用Redux使用商店，这让你的生活在这些情况下变得更容易，而不是给你一个快速的解决方案，只有在这种情况下，使用纯React最终会在真正的大型应用程序中混乱，组件之间的通信变得越来越难，随着应用程序的增长…

那么Redux能为你做什么呢?

Redux就像应用程序中的本地存储，当你需要在应用程序的不同位置使用数据时，可以使用它。

基本上，Redux的想法最初来自于flux，但有一些根本性的变化，包括通过只创建一个存储来拥有一个真相来源的概念……

看看下面的图表，看看Flux和Redux之间的一些差异…

如果您的应用程序需要组件之间的通信，请考虑从一开始就在应用程序中应用Redux。

另外，阅读Redux文档中的这些词可能会有帮助:

As the requirements for JavaScript single-page applications have become increasingly complicated, our code must manage more state than ever before. This state can include server responses and cached data, as well as locally created data that has not yet been persisted to the server. UI state is also increasing in complexity, as we need to manage active routes, selected tabs, spinners, pagination controls, and so on. Managing this ever-changing state is hard. If a model can update another model, then a view can update a model, which updates another model, and this, in turn, might cause another view to update. At some point, you no longer understand what happens in your app as you have lost control over the when, why, and how of its state. When a system is opaque and non-deterministic, it's hard to reproduce bugs or add new features. As if this wasn't bad enough, consider the new requirements becoming common in front-end product development. As developers, we are expected to handle optimistic updates, server-side rendering, fetching data before performing route transitions, and so on. We find ourselves trying to manage a complexity that we have never had to deal with before, and we inevitably ask the question: is it time to give up? The answer is no. This complexity is difficult to handle as we're mixing two concepts that are very hard for the human mind to reason about: mutation and asynchronicity. I call them Mentos and Coke. Both can be great in separation, but together they create a mess. Libraries like React attempt to solve this problem in the view layer by removing both asynchrony and direct DOM manipulation. However, managing the state of your data is left up to you. This is where Redux enters. Following in the steps of Flux, CQRS, and Event Sourcing, Redux attempts to make state mutations predictable by imposing certain restrictions on how and when updates can happen. These restrictions are reflected in the three principles of Redux.

2017-12-08 10:03:53