在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中調用多個函數，一個內部和另一個組件外？

回答

相關問題