Что эквивалентно этому в функциональном компоненте?
Я использую функциональный компонент, и теперь я хочу передать себя другим объектам.
import GlobalParam from './GlobalParam'
const TopPage = (props) =>{
const [load, setLoad] = useState(false);
useEffect(() =>{
GlobalParam.topPage = this;// however it does not work in function component.
})
}
в GlobalParam
export default class GlobalParam {
static topPage;
}
Если я могу передать саму функцию компонента статическому классу,
Я могу загрузить topPage из любого места GlobalParam.topPage.setLoad(true);
Что я должен использовать в функциональном компоненте вместо this?
чего именно вы пытаетесь достичь?
Пожалуйста, уточните: «Я хочу передать себя другим объектам». Какова ваша цель? Что вы хотите, чтобы другие объекты могли делать? Что делать, если есть несколько экземпляров вашего <TopPage>?
Если вы ищете простой/забавный инструмент управления состоянием, signal — это новый и действительно полезный инструмент. Изначально доступно только для Preact вот реализация React.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Взгляните на useContext.
Вы можете определить контекст с помощью createContext (вы можете указать defaultValue, но это выходит за рамки этого примера)
import { createContext } from "react";
const LoadContext = createContext();
export default LoadContext;
Затем вы можете обернуть свое приложение поставщиком, который сделает доступными переменные и функции для всех своих дочерних элементов.
import TopPage from './TopPage';
import Debug from './DebugButton';
import { createContext, useState } from 'react';
import LoadContext from './LoadContext';
function App() {
const [load, setLoad] = useState(false)
return (
<LoadContext.Provider value = {{load, setLoad}}>
<TopPage />
<Debug />
</LoadContext.Provider>
);
}
export default App;
а затем вы можете получить доступ к контексту с помощью крючка useContext!
import {useContext} from 'react';
import LoadContext from './LoadContext';
const TopPage = (props) => {
const {load} = useContext(LoadContext)
return (
<div>
{load? <h1>loading</h1>: <h1>not loading</h1>}
</div>
);
};
export default TopPage;
и еще один компонент, который я сделал только для тестирования
import { useContext } from "react"
import LoadContext from "./LoadContext"
const DebugButton = () => {
const {setLoad} = useContext(LoadContext)
return <button onClick = {()=>{setLoad(v=>!v)}}>Debug</button>
}
export default DebugButton
Я могу решить свою проблему с помощью useContext(). Это очень полезно, и мне лучше использовать это во многих других местах. До сих пор я шаг за шагом определял путь к каждому вложенному компоненту....
Похоже, вы пытаетесь внедрить собственное глобальное управление состоянием. Скорее всего, вам будет проще использовать что-то вроде Redux или
useContextверхнего уровня.