Reactコンポーネントクラスのメソッドとして外部関数を追加できますか？以下は、コンポーネントリアクト考える

Question

：

class MyComponent extends Component { 
    sayGreeting =() => { 
    return this.props.greeting; 
    } 

    render() { 
    return (
     <div>{this.sayGreeting()}</div> 
    ); 
    } 
} 

greetingは小道具を経由して渡され、単なる文字列メッセージです。 sayGreeting（）が複数のコンポーネントで使用されていて、全く同じ定義で使用されている場合、ファイルに抽出して（次のコードを参照）、必要に応じて各コンポーネントに何らかの形で含めることができます。これは、Rubyのようなプログラミング言語のincludeモジュール（またはmixin？）パターンに似ています。

export const sayGreeting =() => { 
    return this.props.greeting; 
}; 

私はそのファイルからsayGreetingをインポートし、そのようにMyComponentというのプロトタイプを設定することにより、それを行うことができました：

import { sayGreeting } from './someFile'; 
// ... 
MyComponent.prototype.sayGreeting = sayGreeting; 

しかし、小道具はできませんので、問題が、「この」キーワードであります定義された。私はthis.sayGreeting = this.sayGreeting.bind(this)を使用してコンストラクタでバインドしようとしましたが、動作しませんでした。

Answer 1

thisを関数に渡します。

その後

export const sayGreeting = ({props}) => { 
    return props.greeting; 
}; 

インポートした後、使用する： sayGreeting(this)

Answer 2

あなたはhigher-order componentを使用することができます。

const myHOC = (composedComponent) => { 
    return class extends React.Component { 
    sayGreeting =() => { 
     return this.props.greeting; 
    } 

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

class MyComponent extends React.Component { 
    render() { 
     return <div>{this.props.sayGreeting()}</div> 
    } 
} 

export default MyHOC(MyComponent);