在具有远程关系的React组件之间使用事件

Question

我有一个组件，当单击该组件时，它需要发出get请求并更改完全不同的组件的内容。 我画了一个图来显示他们的关系：

我被告知要使用Flux来做到这一点，但是老实说，我完全迷失了学习它们的方法，并且不喜欢我所看到的。 使事情变得更加复杂的是，该项目没有使用npm或node，这似乎是所有教程中必不可少的，因此，如果我真的必须使用Flux，如何在没有npm和所有require调用的情况下摆脱它？ 这是我当前的相关代码：

var AboutItem = React.createClass({
    handleClick: function(event){
        //do something to update ChangeLogData!
    },

    render: function () {
        return (
            <ListGroup>
                {this.props.list.map(function (listValue,key) {
                    var link = currentUrl + "/changelog/" + listValue.split(' ')[0];
                    return <ListGroupItem key={key} className="module"
                                                    bsStyle="warning"
                                                    onClick={this.handleClick}>
                        {listValue}
                    </ListGroupItem>
                }, this)}
            </ListGroup>
        );
    }
});

var ChangeLogData = React.createClass({

    getInitialState: function () {
        return {
            content: {},
        };
    },

    render: function () {
        return (
            <div>
                 Something from AboutItem
            </div>
        );
    }
});

Answer 1

您能做的（我能想到的）最好的事情是使handleClick成为<About />组件中的一个函数，并使其更新其log状态。 然后，可以将该组件作为props传递给<AboutItem/>组件，并将日志状态也作为props传递给树。 因此，每当状态更改时， <ChangeLogData />都会接收该状态并重新呈现。

Answer 2

在React中，数据下游和事件上游。 您需要做的是

1. 将About组件设为有状态，并包含state的某些属性，例如shouldUpdateLog 。 默认情况下，它是错误的。
2. 将函数以其父项About组件的prop形式传递给AboutItem组件。 该功能将更新About组件的状态。
3. 将About组件状态的属性向下传递到ChangeLogData并依赖于任何组件更新的值。 如果将这些数据放在render ，那将很容易，但是由于需要触发一个函数，因此需要侦听ChangeLogData每个componentDidUpdate 。

因此，首先， About ：

class About extends React.Component {
  constructor() {
    super();
    this.state = {
      shouldUpdateLog: false
    };
  }

  handleUpdate() {
    this.setState({
      shouldUpdateLog: true
    });
  }

  render() {
    return (
      <div>
        <AboutItem onUpdate={this.handleUpdate.bind(this)} />
        <ChangeLog>
          <ChangeLogData shouldUpdateLog={this.state.shouldUpdateLog} />
        </ChangeLog>
      </div>
    );
  }
}

现在， AboutItem ：

class AboutItem extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.onUpdate} />
      </div>
    );
  }
}

最后是ChangeLogData ：

class ChangeLogData extends React.Component {
  componentDidUpdate() {
    if (this.props.shouldUpdateLog) {
      // call that function!
    }
  }

  render() {
    return (
      <div />
    );
  }
}