Отделить функцию от компонента React (улучшить модульность) - PullRequest
Новая
       14

Отделить функцию от компонента React (улучшить модульность)

0 голосов
/ 15 апреля 2020

Я создал свое первое приложение 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, но в структуре функционального компонента. Он принимает опору даты, а затем я использую компонент GetDate в своем компоненте NLG. Но я получаю следующую ошибку: «Произошла перекрестная ошибка. React не имеет доступа к фактическому объекту ошибки в разработке.» Я не включил здесь свою неудачную попытку, так как сделал вопрос очень длинным.

Мне не нужно было использовать состояние обычным способом в моем приложении, поскольку оно встроено в форму React Hook Form, которую я использую. Но я подозреваю, что сейчас время, когда мне нужно будет научиться им пользоваться ?! Кто-нибудь может посоветовать, как это сделать? Большое спасибо:)

Кат ie

1 Ответ

1 голос
/ 15 апреля 2020

Отличная привычка - отделять ваши функции c от компонентов. Просто убедитесь, что вы 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;
...