Как получить доступ к состоянию в функции, которая находится в другом файле

Question

сегодня я закончил свое первое приложение React - калькулятор.

Я думаю, что было бы лучше иметь приложение. js очистить и поместить все функции logi c в отдельный файл Logi c. js, а также все функции дизайна (изменение размера шрифта вывода в зависимости от длины числа или кнопки при анимации щелчка), например, в Эффектах. js.

Возникла проблема, когда я взял функции , поместил их в новый файл (конечно, экспортировал их, а также импортировал в app. js).

Ошибка говорит, что setNumber (метод, который я вызываю, когда хочу работать с состоянием),

number.firstNumber (состояние firstNumber, которое содержит номер первого щелчка),

И каждое состояние, которое я вызываю в этом файле (функции или условия), не определено, поэтому это означает, что этот файл не имеет доступа к приложению . js состояние. Есть ли способ сохранить эти функции разделенными и мне не нужно перестраивать все приложение, чтобы получить чистый код?

Приложение. js создание состояний, с которыми я работаю в этих функциях

const [number, setNumber] = useState({
firstNumber: "",
secondNumber: "",
operator: "",
result: "0",
displayed: "0",
cButton: "AC",
cButtonCheck: false,
numToReset: false,
sizeOfOutput: "1em",
isOrange: false
});

Пример функции в новом файле, которая выдает ошибку setNumber, не определена

function turnOnOrange(operator) {
if (number.isOrange === false)     {
  setNumber(prevState => ({
    ...prevState,
    isOrange: true,
    whichOrange: operator
  }));
  operator.className = "orangeActivated";
}
}

Спасибо, ссылка, чтобы вы могли увидеть весь код

https://codesandbox.io/embed/youthful-platform-n6lvs?fontsize=14&hidenavigation=1&theme=dark&codemirror=1

Answer 1

Вы можете разделить единственный объект состояния, который у вас есть в App.js, на несколько управляемых связанных состояний, а затем создать свои собственные настраиваемые хуки , которые будут управлять частью состояния, которое вы только что разбили.

Например, для функции turnOnOrange вы можете создать новую ловушку с именем useOrangeHook в ее собственном файле и импортировать и использовать ее в качестве ловушки:

import React, { useState } from "react";

export default function useOrangeHook(operator) {
  const [orangeState, setOrangeState] = useState({
    isOrange: false,
    whichOrange: ""
  });
  if (!orangeState.isOrange) {
    setOrangeState(prevState => ({
      ...prevState,
      isOrange: true,
      whichOrange: operator
    }));
    operator.className = "orangeActivated";
  }
  return orangeState;
}

Пользовательские хуки - это механизм для повторно использовать журнал с сохранением состояния c. Ознакомьтесь с руководством по React здесь .

Answer 2

Во-первых, разделение вещей имеет большой смысл, кроме случаев, когда вы пытаетесь управлять состоянием компонента. Причина здесь в том, что состояние полностью управляется компонентом, включая переменные линзы, в вашем случае [number, setNumber]. Наличие функции, которая вызывает их извне из компонента, вызывает большой красный флаг и, как вы заметили, не работает.

Причина, по которой она не работает, зависит от области действия. Функция turnOnOrange не будет вызываться в рамках самого компонента. Поскольку вы используете функциональный компонент, this имеет очень мало значения, поэтому даже turnOnOrange.call(this, operator) не сильно поможет. c, в данном случае он работает против вас и на самом деле не очень интуитивно понятен, если подумать. Ваша функция turnOnOrange абсолютно принадлежит этому компоненту.

Answer 3

Я думаю, вы можете определить свои собственные хуки для управления частичным состоянием, так как Hook был создан для совместного использования состояния. Вот один из примеров:

yourHook. js

export function colorHook(initValue) {
  const [color, setColor] = React.useState(initValue);

  // Define whatever you want
  const setOrange = () => setColor({ isYellow: true }) 

  return [color, setColor, setOrange, // pass more ];
}

В вашем основном файле:

import { colorHook } from "./yourHook";

function yourComponent() {
  const [color, setColor, setOrange] = colorHook({ /* your value */ }) 
}

Answer 4

Вы должны вернуть эти переменные из функции и экспортировать функцию, а не наоборот.

То, что вы пытаетесь сделать, называется настраиваемыми хуками. Я дам вам пример, в котором вы можете поразмышлять над:

useMyFirstCustomHook.js file
import React, { useState } from 'react';

const useMyFirstCustomHook = () => {
  const [count, setCount] = useState(0);
  // do some stuff
  return { count, setCount };
};

export default useMyFirstCustomHook;

App.js file
//..
import useMyFirstCustomHook from 'path/to/useMyFirstCustomHook';
//..
const { count, setCount } = useMyFirstCustomHook();
console.log(count);