Question

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

我被告知使用Flux这样做，但说实话，我完全迷失了，试图学习它们，并且不喜欢我所看到的。为了使事情变得更复杂，这个项目不使用npm或节点，这似乎几乎是所有教程的必要条件，所以如果我真的必须使用Flux，我怎么能在没有npm和所有需要调用的情况下逃脱它？这是我目前的相关代码：

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

你可以做的最好的事情（我能想到的）是让句柄点击<About />组件中的一个函数并使其更新为log状态。然后，您可以从该组件将此函数作为props传递给<AboutItem/>组件，并将日志状态也作为props传递给树。因此，只要状态发生变化，<ChangeLogData />就会收到并重新渲染。

Answer 2

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

使About组件有状态并包含某个州的属性，比如说shouldUpdateLog。默认情况下，它是错误的。
将函数从其父AboutItem组件以prop的形式传递给About组件。该功能将更新About组件的状态。
将About组件状态的属性传递给ChangeLogData，并依赖于其对任何组件更新的值。如果您将此数据放在render中，这很容易，但由于您需要触发某个功能，因此您需要收听componentDidUpdate的每个ChangeLogData。

首先，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 />
    );
  }
}

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

2 个答案: