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

我有一个触发器应该改变其子组件的状态。两个呈现语句的结果都是无关紧要的。我唯一担心的是，我不确定如何使用trigger触发器调用leftbehind函数，而不将leftbehind放在其父渲染器Another中。在React中调用多个函数，一个内部和另一个组件外？

我的代码如下。目标是让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调用的地方。我不希望在渲染函数中调用它。

来源

2016-07-20 Jason Chen

您的实施每次执行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调用相关以决定哪种更适合。最重要的是，在这两种情况下，除非点击事件被触发，否则API将不会执行。

来源

2016-07-20 02:16:48 Season

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

回答

相关问题