javascript - 在React中调用多个函数，在组件内部调用另一个函数？

我有一个触发器，应该更改其子组件的状态。两个render语句的结果都无关紧要。我唯一关心的是，我不确定如何使用trigger触发器调用leftbehind函数，而不将leftbehind放在其父渲染Another中。

我的代码如下。目的是让leftbehind运行而不必将其放入渲染器中。

var Another = React.createClass({
  leftbehind: function() {
    if (this.props.status === "dare") {
      alert('Winning!');
    }
  },
  render: function() {
    if (this.props.status === "truth") {
      return (<p>Yes</p>);
    } else {
      return (<p>Nope</p>);
    }
  }
});

var App = React.createClass({
  getInitialState:function() {
    return {deesfault: "truth"};
  },
  trigger: function() {
    this.setState({deesfault: "dare"});
  },
  render: function() {
    return (
      <div>
        <p onClick={this.trigger}>{this.state.deesfault}</p>
        <Another status={this.state.deesfault}/>
      </div>
    );
  }
});

我不想在渲染器中放置leftbehind的原因是，从技术上讲，它应该代替API调用。而且我不希望在render函数中调用它。

最佳答案

每次渲染leftbehind且其<Another>道具为status时，您的实现都会执行true。就是说，一旦status翻转为true，leftbehind将在随后的每个渲染中反复执行，直到将其翻转回false。这将严重引起问题。

由于目的是通过click事件触发leftbehind，因此我将以不同的方式重组组件。


将leftbehind移到父组件中，并使其与click事件一起执行。如果<Another>需要结果，则将它们通过道具传递。

var Another = React.createClass({
  render() {
    return <div>{this.props.params}</div>;
  }
});

var App = React.createClass({
  getInitialState() {
    return {apiRes: null};
  },
  onClick() {
    const res = someAPICall();
    this.setState({apiRes: res});
  },
  render() {
    return (
      <div>
        <p onClick={this.onClick}>Fire</p>
        <Another params={this.state.apiRes} />
      </div>
    );
  }
});

或者，将<p>元素与click事件一起移动到<Another>中。

var Another = React.createClass({
  getInitialState() {
    return {apiRes: null};
  },
  onClick() {
    var res = someAPICall();
    this.setState({apiRes: res});
  },
  render() {
    return (
      <div>
        <p onClick={this.onClick}>Fire</p>
        <div>{this.state.apiRes}</div>
      </div>
    );
  }
});

var App = function() { return <Another />; }

在后者中，密钥逻辑在内部组件中处理。外面的只是一个容器。在前者中，外部组件处理逻辑并传递结果（如果有）。这取决于组件与API调用之间的关系，以决定哪个更合适。最重要的是，在两种情况下，除非触发click事件，否则API均不会执行。