反應：高階組件：你可以孩子狀態

我想重構mixin到HOC，所以我可以升級到最新的反應（我目前使用React 13/ES5）。當我的組件加載時，mixin可以訪問數據對象this.data，該數據對象具有query屬性和路由。反應：高階組件：你可以孩子狀態

React.createClass({ 
    mixins: [myMixin], 
    data: { 
    query: "/api/foo" 
    }, 
    componentDidUpdate(): function(){ 
    } 
    ... 
}

在componentDidMount的混入裏面，它會詢問這條路線，取回數據，並把它的狀態。

var myMixin = React.createClass({ 
    componentDidMount(): function(){ 
    this.fetchData(this.data.query) 
    } 
    fetchData(query) { 
    // fetch the data 
    } 
    ... 
}

這從我的組件提取了很多樣板。我不必在每個組件上運行componentDidMount，只需要有data對象。

我把這個mixin分散在整個項目中。它實際上做的比這更多，但我只是試圖讓它失望。

進來HOCs。我把所有的東西從data拿到getInitialState。現在，我在現在包裝的組件的狀態上有data，我該如何訪問它？就像我的mixin，我希望我的HOC能夠處理我的componentDidMount，訪問data.query並獲取數據。我不想重寫每個組件都有componentDidMount。

PS- 我通常使用最新版本的React和ES6，如果有人能告訴我爲什麼mixin可以做this.data，而且我的組件不會那麼有用。在最新版本的React中，您不能像這樣定義render()以外的對象。

來源

2017-04-01 user2465134

回答這個會更容易，如果你願意發佈你的HoC代碼 –

我不同意。如果你不能在最基本的層面回答這個問題，你應該如何回答它，並增加複雜性。 – user2465134

這不太好。由於您的寫作方式，您的問題相當難以理解。我花時間閱讀並試圖爲您量身定製解決方案。如果您想要一個模糊的答案：您可以使用任何標準模式，其中子組件需要與父組件進行通信。通過道具把東西傳遞給孩子（你可以把你的包裝的狀態作爲道具傳遞給孩子）。如果您的孩子需要回傳給父母，請讓父母將其傳遞給處理函數。 –

React不鼓勵從組件外部更改state。 state由組件擁有，因此只有組件可以控制它。

從React documentation：

狀態類似於道具，但它是私有的，由組件完全控制。

所以你可以做的是使用props而不是state。對於給定的示例，您可以按如下所示編寫高階組件。但是您的子組件應該被更改爲呈現來自props而不是state的數據。

function HOC(WrappedComponent){ 

    return React.createClass({ 

    getInitialState: function() { 
     return { data: null }; 
    }, 

    componentDidMount: function(){ 
     this.fetchData(WrappedComponent.prototype.data.query) 
    }, 

    fetchData: function(query){ 
    // Fetching data first 
    // Then set the state with data 
    this.setState({data:data}); 
    }, 

    render: function() { 
     var props = Object.assign({}, this.props, this.state); 
     return React.createElement(WrappedComponent, props); 
    } 

    }); 

} 

var HOCChild = HOC(Child);

PS-我通常使用的反應，ES6，如果任何人都可以告訴我爲什麼混入可以做this.data和我的組件不能那將是非常有益的最新版本。在最新版本的React中，您不能在像這樣的render（）之外定義一個對象。

通常，React Component定義爲ES6類。 ES6類不支持靜態或實例屬性。但是你可以像這樣在承包商內定義實例屬性。

class A{ 
    constructor(){ 
    this.foo = "foo" 
    } 
}

來源

2017-04-02 08:20:28

反應：高階組件：你可以孩子狀態

回答

相關問題