在單獨組件的React類中使用方法

在我網站的主頁上，您可以單擊一個菜單按鈕，觸發切換菜單的方法。這將狀態從menuOpen從false更改爲true。在單獨組件的React類中使用方法

在不同的頁面上，我點擊一個'返回'按鈕，它應該回到主路線，但是當頁面加載時而不是點擊時打開這個菜單。目前我所有的是：

handleBack(){ 
    App.navigate('/'); 
}

我可以import組件和調用它的方法嗎？或者我可以設置一個新的React Router路由，以某種方式執行狀態更改？或者有其他解決方法嗎？

來源

2016-03-21 alanbuchanan

設置工作js小提琴。那麼，我們可能會幫助你。 – Andreyco

Redux會有所幫助，但是由於我猜測你沒有使用或者你不想重構整個應用程序來設置這個布爾值，所以我建議使用更高階的組件。

因此，例如，您可以定義一個高階組件（認爲超）是這樣的：

export function menuToggler(ComposedComponent) { 

    return class extends React.Component { 
     toggleMenuBoolean() { 
      // code here 
     }, 
     render() { 
      return <ComposedComponent toggleMenuBoolean={toggleMenuBoolean} {...this.props} /> 
     } 
    }; 
}

然後，在你的常規組件，您只需用高階組件包裹。所以，如果以前，你使用ES6和導出組件是這樣的：

export default MyComponent;

然後，它將成爲：

export default menuToggler(MyComponent);

從那裏，你可以從被包裹的任何組件調用此功能您的高階組件通過簡單地調用它的道具：

this.props.toggleMenuBoolean(false)等

來源

2016-03-21 15:40:15 sma

如果您需要該方案，請將狀態值傳遞給作爲「智能組件」管理啞元組件的父組件。或者你可以使用'flux'/'redux'。

來源

2016-03-21 14:14:33 seoyoochan

在單獨組件的React類中使用方法

回答

相關問題