вчера я спросил, как можно «очистить» мое приложение. js файл и разделить логические, математические c функции или эффекты в разных файлах, чтобы мой основной файл был красивым и легко читаемым. У меня есть несколько ответов на использование Custom Hooks , и они дали мне пример того, как это сделать, но я действительно не понимаю. В моем приложении «Калькулятор» было несколько изменений кода по сравнению с кодом, который я предоставил, когда впервые спросил.
Я пытался понять, как это работает, или прочитал официальную документацию React , но мне ничего не помогло.
Первое, что не имеет для меня смысла, это вот это. Я пробовал какой-нибудь basi c customHook. Пока что для попытки выполнить эту работу я создал файл OrangeButtonHook. js, который содержит
import React, { useState } from 'react';
export default function useOrangeButtonHook(operator){
const [whichOrange,setWhichOrange] = useState({
whichOrange : 'there should be some text'
})
return whichOrange;
}
и в моем приложении . js Я просто импортирую его и использую, как они показали мне в ответ на мой предыдущий вопрос
import useOrangeButtonHook from './Components/OrangeButtonHook';
const {whichOrange, setWhichOrange} = useOrangeButtonHook();
console.log(whichOrange) //this works ,and in my console is 'there should be some text'
Но для лучшего понимания я попытался переименовать его во что-то более понятное для меня.
//OrangeButtonHook.js
import React, { useState } from 'react';
export default function useOrangeButtonHook(operator){
const [whichOrange,setWhichOrange] = useState({
button : 'there should be some text'
})
return whichOrange;
}
Но когда я пытаюсь вызвать его в приложении. js, моя консоль показывает 'undefined'.
const {whichOrange, setWhichOrange} = useOrangeButtonHook();
console.log(whichOrange) //throws undefined
Итак, я попытался позвонить вот так
const {whichOrange, setWhichOrange} = useOrangeButtonHook();
console.log(whichOrange.button) //this works throws lot of errors
Я не понимаю, в чем проблема, и не понимаю, как я должен разделять эти функции по разным файлам. Проблема в том, что, например, эта функция должна добавлять класс с эффектом на кнопку при нажатии кнопки оператора.
function turnOnOrange(operator){
setNumber(prevState => ({
...prevState,
whichOrange:operator
}))
operator.className = 'orangeActivated';
}
function turnOffOrange(){
number.whichOrange.className = 'orangeDisabled';
setNumber(prevState => ({
...prevState,
whichOrange:null
}))
}
Но эти функции вызываются внутри getOperator () функции, которая вызывается, когда пользователь нажимает кнопку оператора.
function getOperator(e){
let operator = e.target;
setNumber(prevState => ({
...prevState,
operator:operator.name
}))
if(!number.whichOrange){
turnOnOrange(e.target);
}
if(number.whichOrange){
number.whichOrange.className='orangeDisabled';
turnOnOrange(e.target)
}
}
Почти все операции и операции «связаны» друг с другом. Ссылка на codeandbox, чтобы вы могли увидеть весь код приложения калькулятора и лучше понять, о чем я говорю: здесь .
Я буду очень признателен, если кто-нибудь объяснит мне или покажет, как это работает или как это сделать. Спасибо.