Как я могу переместить эту функцию из app.js?

Я намерен убрать логику из моего app.js. Прямо сейчас в app.js у меня есть функция, которая изменяет состояние некоторых переменных в App.js. Я хочу узнать, как правильно изменить состояние внутри app.js, позволив app.js вызывать функцию (например, при щелчке), которая находится в другом компоненте.

мой app.js выглядит следующим образом:

const App = () => {
    const [opacity, opacitySet] = React.useState(1);
    const [showStep, setDisplayStep] = React.useState(true);
    const [isQrActive, setQrState] = React.useState(false);
    
/** code **/

  <ButtonContinue
    onClick={() => {
       stateChanger();
    }}
    style={{ backgroundColor: "black" }}
  >
    <p>cancel</p>
  </ButtonContinue>

/** lots of code **/

 function stateChanger() {  

   opacitySet(0);
     setTimeout(() => {

       opacitySet(1);
       setDisplayStep(!showStep);
       setQrState(!isQrActive);
     }, 400);

 }

/** and more code **/

}

Я хочу переместить функцию stateChanger из app.js, но сохранить ту же функциональность. Это, в свою очередь, позволило бы мне легко вызывать stateChanger из других классов.

В stateChanger отсутствует код? Не похоже, чтобы много беспокоиться о переезде. Вы можете переместить код в пользовательский хук, который возвращает то, что нужно внешнему миру (состояние, обратные вызовы, сеттеры). Состояние настройки в setTimeout, подобное этому, является утечкой памяти, если компонент размонтирован до истечения тайм-аута, кстати, обычно вы делаете асинхронный код в useEffect, чтобы вы могли очистить при размонтировании

Dominic 09.04.2022 18:53

Вы можете использовать redux для удовлетворения ваших требований. Если вы хотите сделать это без использования избыточности, вы должны передать функцию в качестве реквизита всем дочерним компонентам.

Sushant Paudel 09.04.2022 18:54

Вот и все. У меня таких функций больше и они делают примерно то же самое.

MA A 09.04.2022 18:55

Думаю редукс вам поможет именно в этой ситуации redux.js.org/introduction/getting-started

M.El Yaakoubi 09.04.2022 19:11
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
4
45
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Самое простое решение (которое также сложнее всего масштабировать) — передать функцию в качестве реквизита своим дочерним элементам. Вы также можете создать собственный хук. Но, объявив состояние в корневом компоненте App и спросив, как вы можете вообще изменить его из другого компонента, мы можем интерпретировать, что вопрос, по сути, касается того, как обрабатывать глобальное состояние. Вы можете рассмотреть возможность использования Context API или Redux, инструментов, созданных специально для этой цели.

Здесь важно помнить, что если у нас есть возможность поддерживать состояние достаточно близко к тому месту, где оно используется и изменяется, мы должны делать это вместо того, чтобы обрабатывать его как часть глобального состояния.

Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, редактировать добавьте дополнительную информацию, например цитаты или документацию, чтобы другие могли подтвердить правильность вашего ответа. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.

Community 10.04.2022 08:09

Другие вопросы по теме