Ben sadece ReactJS ile başladı ve ben bu sorun üzerinde biraz takıldım.

Benim uygulama aslında filtreleri ile bir liste ve düzenini değiştirmek için bir düğme vardır. Şu anda kullanıyorum üç bileşenden oluşur: <list />, < Filters /> <TopBar />, şimdi açıkçası ben ayarları değiştir < Filters /> istediğim için tetikleyici bazı yöntem <list /> güncelleme benim görüşüm.

Nasıl bu 3 bileşenleri birbirleriyle etkileşim yapabilir miyim yoksa sadece değişiklik yapacağım yeri genel veri modeli bir tür ihtiyacım var?

En iyi yaklaşım bu bileşenleri düzenlemek için planlıyorsanız nasıl bağlıdır. Hemen akla gelen birkaç örnek senaryo:

1. <Filters /> <List /> Bir alt bileşenidir
2. <Filters /> <List /> her iki ana bileşen çocuklarısınız
3. <Filters /> <List /> ayrı kök bileşenleri tamamen canlı.

Düşünüyorum başka senaryolar da olabilir. Eğer senin içinde uygun olursa bu değil mi, sonra da bana haber ver. Burada ilk iki senaryo yürüttüm ne kadar çok kaba bazı örnekler:

Senaryo #1

Geçerli değer listesini filtrelemek için onChange olay " diyebileceğimiz <Filters /> <List /> bir işleyici geçebilirsiniz.

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);

Senaryo #2

Senaryo #1, ama ana bileşene benzer bir <Filters /> işleyici işlevi yok olacak ve <List /> filtre listesi geçecek. <Filters /> <List /> bunu decouples beri bu yöntemi daha çok seviyorum.

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);

Senaryo #3

Bileşenleri ebeveyn-çocuk ilişkisi, documentation recommends setting up a global event system herhangi bir tür arasında iletişim kurabilirsiniz.