将功能与 React 组件分离（提高模块化）

Question

我创建了我的第一个 React 应用程序，它接收用户通过表单提交的数据并根据他们输入的数据编写消息。我已经使用带有钩子的 React 来做到这一点，并希望继续使用钩子。

以下是我的组件的精简版。我想通过提取 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 无法访问开发中的实际错误对象。” 我没有在这里包含我失败的尝试作为这使问题变得非常冗长。

到目前为止，我不需要在我的应用程序中以正常方式使用状态，因为它内置在我正在使用的 React Hook Form 中。但我怀疑现在是我需要学习如何使用它的时候了？！有人可以建议如何执行上述操作吗？非常感谢:)

凯蒂

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;