☰

React でコンポーネント間で関数を共有する正しい方法 質問する

tag-icon • tag-icon reactjs
React でコンポーネント間で関数を共有する正しい方法 質問する

同じことを行う必要がある複数のコンポーネントがあります。(子コンポーネントにマップし、それぞれに何かを行う単純な関数) 現時点では、各コンポーネントでこのメソッドを定義しています。ただし、定義するのは 1 回だけです。

これをトップレベルのコンポーネントで定義し、それをプロパティとして渡すこともできます。しかし、それはあまり適切ではないようです。これはプロパティというよりはライブラリ関数です。(私にはそう思えます)。

これを実行する正しい方法は何ですか?

ベストアンサー1

最新の Javascript ES6 構文を使用した Utils.js

Utils.js複数の関数などを含む次のようなファイルを作成します

const someCommonValues = ['common', 'values'];
    
export const doSomethingWithInput = (theInput) => {
   //Do something with the input
   return theInput;
};
    
export const justAnAlert = () => {
   alert('hello');
};

次に、ユーティリティ関数を使用するコンポーネントで、必要な特定の関数をインポートします。すべてをインポートする必要はありません。

import {doSomethingWithInput, justAnAlert} from './path/to/Utils.js'

そして、コンポーネント内でこれらの関数を次のように使用します。

justAnAlert();
<p>{doSomethingWithInput('hello')}</p>

おすすめ記事