将函数与 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 组件。但是我一直收到以下错误："A cross-origin error was thrown. React doesn't have access to the actual error object in development." 我没有在此处包含我失败的尝试，因为它使问题变得非常冗长。

到目前为止，我不需要在我的应用程序中以正常方式使用状态，因为它内置在我正在使用的 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;

将函数与 React 组件分离（提高模块化）

Separate a function from a React component (improve modularity)

modularity

reactjs

react-hooks