reactjs - React 中组件之间共享功能的正确方法

Question

我有多个组件，它们都需要做同样的事情。 (一个简单的函数，映射其子组件并对每个子组件执行某些操作)。目前我正在每个组件中定义此方法。但我只想定义一次。

我可以在顶级组件中定义它，然后将其作为 prop 向下传递。但这感觉不太对劲。它更像是一个库函数而不是一个 Prop 。 (在我看来)。

正确的做法是什么？

Answer 1

Utils.js 具有最新的 Javascript ES6 语法

创建具有多个函数等的 Utils.js 文件

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

然后在您想要使用 util 函数的组件中，导入所需的特定函数。您不必导入所有内容

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

然后在组件中使用这些函数，如下所示:

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