javascript - react : access component function from another component

Question

刚刚从别人那里拿到了一个 React 项目，但我是 React 新手，所以有点挣扎!

我有一个文件ReactReport.js看起来像这样(简化):

var ReportRoute = React.createClass({
  onToggleEditor: function() {
    this.setState({
      reportIsOpen: false
    });
  },
  getReportClassNames: function() {
    return classNames({
      'blinds--report-closed' : !this.state.reportIsOpen 
    });
  },
  render: function() {
    return (
      <div className={this.getReportClassNames()}>
        <!-- content -->
      </div>
    );
  }
});

module.exports = ReportRoute;

我有一个单独的文件index.js其中包含一个点击事件。在我的onChange函数我想触发 onToggleEditor函数来自 ReportRoute类。

var Categories = React.createClass({
  onChange: function(category) {
    // trigger ReportRoute.onToggleEditor();
  },
  renderCategory: function(category) {
    return (
      <Category
        category={category}
        chosenType={this.props.chosenType}
        key={category.type}
        onChange={this.onChange} />
    );
  },
  render: function() {
    return (
      <div>
        {this.state.categories.map(this.renderCategory)}
      </div>
    );
  }
});

module.exports = Categories;

如何触发onToggleEditor来自 ReportRoute 的函数来自onChange内Categories的功能？

Answer 1

您将必须使用 React 的 Flux 架构来进行组件间通信。Flux 有很多实现。1.反流2. 还原

基本上在类别 onChange 中，您将触发一个操作。

onChange: function() {
  ReportActions.toggleEditor()
}

您的 ReportRoute 将绑定(bind)到商店。请检查这个例子 https://blog.ochronus.com/react-js-reflux-example-2d46a4d8faf0#.wcarr7oqt