从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中。但是我怀疑现在是时候需要学习如何使用它了！任何人都可以建议如何做以上吗？非常感谢：）

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;