将功能与React组件分离(提高模块性)

Question

我创建了我的第一个React应用程序，它接受用户通过表单提交的数据，并根据用户输入的数据编写消息。我已经使用React with hook来实现这一点，并希望继续使用hook。

下面是我的组件的精简版本。我想通过提取getDate函数并将其移动到一个单独的js文件中来提高模块性。这将允许我在其他地方重复使用它。你能根据我下面的精简代码建议如何做到这一点吗？

NLG.js(单个组件中的所有代码(

import React from 'react';
import {isYesterday, format} from 'date-fns';
const NLG = ({ watchAll }) => {
const allAnswers = JSON.parse(watchAll);
/*Convert date to language*/
const getDate = (date) => { 
if (isYesterday(date) === true) {
return 'yesterday';
}
else {
return 'on ' + format(date, 'EEEE');
}
};
return (
<p>
{getDate(Date.parse(allAnswers['dateUpdateFailed']))}
</p>
);
};
export default NLG;

我尝试创建一个名为GetDate的新组件，该组件包含我的GetDate函数，但位于函数组件的结构中。它接受一个日期道具，然后我在NLG组件中使用GetDate组件。但我一直收到以下错误："引发了一个跨原点错误。React在开发中无法访问实际的错误对象。">我没有在这里包括我的失败尝试，因为它使问题变得非常冗长。

到目前为止，我还不需要在我的应用程序中以正常的方式使用state，因为它内置在我正在使用的React Hook Form中。但我怀疑现在是我需要学习如何使用它的时候了？！有人能建议如何做到以上几点吗？非常感谢：(

Katie

Answer 1

将静态函数与组件分离是一个很好的习惯
只需确保export和import正确：

// getDate.js
import { isYesterday, format } from 'date-fns';
const getDate = (date) => {
if (isYesterday(date) === true) {
return 'yesterday';
} else {
return 'on ' + format(date, 'EEEE');
}
}
export default getDate;

// NLG.jsx
import React from 'react';
import getDate from './getDate.js'; // Assuming they're both in the same directory
const NLG = ({ watchAll }) => {
const allAnswers = JSON.parse(watchAll);
return (
<p>
{getDate(Date.parse(allAnswers['dateUpdateFailed']))}
</p>
);
};
export default NLG;