我如何從React中的HOC（高階組件）訪問方法/函數而不將其作爲通道傳遞？

我有一個更高階的組件。我可以從HOC繼承props到我的Wrapped Component，但我也想繼承它的方法/函數。做這個的最好方式是什麼。我如何從React中的HOC（高階組件）訪問方法/函數而不將其作爲通道傳遞？

我想用this.myHocFunc而不是this.props.myHocFunc。我也不想在包裝組件中映射this.myHocFunc到this.props.myHocFunc。所有的邏輯需要理想的HOC組件

這裏面發生的事情是我的特別組成部分：

import React, { Component } from "React"; 

export var MyEnhance = ComposedComponent => class extends Component { 
    constructor() { 
     super(); 
    } 

    myHocFunc(text) { 
     // text should be 'hello world' 
     console.log(text); 
    } 

    componentDidMount() { 
    } 

    render() { 
     return <ComposedComponent {...this.props} />; 
    } 
};

這裏是我的包裹成分：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { MyEnhance } from "./enhance"; 

@MyEnhance 
class MyComponent extends React.Component { 
    render() { 
    return <button onClick={this.myHocFunc('hello world')}</div>; 
    } 
}; 

ReactDOM.render(<MyComponent />, document.getElementById('root'));

在此先感謝

來源

2017-05-24 BennyTicklez

這似乎有點迂迴。你爲什麼要這樣做？ –

這是一個非常簡單的例子。它實際上是更新一個具有大量組件的應用程序，它們都具有功能。這些組件被封裝在一個HOC中，因此我想將該功能移到HOC中，而不必將組件'this.func'中的所有函數引用更新爲'this.props.func' – BennyTicklez

這似乎就像繼承工作一樣，例如

class MyEnhancedComponent extends React.Component { 
    myHocFunc(text) { 
    console.log(text); 
    } 
} 

class MyComponent extends MyEnhancedComponent { 
    render() { 
    return <button onClick={() => this.myHocFunc('hello world')}</div>; 
    } 
}

我不確定您對MyEnhance的其他要求是什麼，但您可能過於複雜。否則，你也可以顯式地添加該函數。

export var MyEnhance = ComposedComponent => class extends Component { 
    // ... 

    enhance(instance) { 
    instance.myHocFunc = this.myHocFunc.bind(instance); 
    } 

    render() { 
    return this.enhance(<ComposedComponent {...this.props} />); 
    } 
}

最後，如果你真的不能用「正常」的繼承，你可能需要看看traits模式有多重繼承。我也爲此寫了一個very tiny library。

來源

2017-05-24 17:39:13 jchook

感謝您的輸入。我試圖顯式添加該函數，但我得到以下錯誤：'未捕獲的TypeError：無法讀取屬性'綁定'的未定義' – BennyTicklez

我的錯誤。我沒有添加myHocFunc。一旦我添加它，我會得到一個不同的錯誤：'未捕獲的TypeError：無法添加屬性myHocFunc，對象不可擴展' – BennyTicklez

是否有一個原因，爲什麼簡單的繼承不會適合您的情況？ – jchook

我如何從React中的HOC（高階組件）訪問方法/函數而不將其作爲通道傳遞？

回答

相關問題