Question

我有一个触发器，它应该改变其子组件的状态。两个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函数中调用它。

Answer 1

每次leftbehind呈现<Another>道具为status时，您的实施都会执行true。也就是说，一旦status翻转为true，leftbehind将在每次后续渲染中反复执行，直到它被翻转回false。这将严重导致问题。

由于打算通过点击事件触发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>元素与点击事件一起移动到<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将不会执行。

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

1 个答案: