Как сказал @Matt, вы должны превратить свой компонент класса в функциональный, который передает API-интерфейсы Recoil в качестве опоры.
В любом случае, если вы хотите установить токен атома из вашего Login
компонента , вы можете просто обернуть Login
в компонент, который передает результат useSetRecoilState
const LoginWrapper = () => {
const setToken = useSetRecoilState(tokenState);
return <Login setToken={setToken} />;
};
В случае более сложных случаев вы можете использовать Recoil 'useRecoilCallback
который позволяет вам использовать все API Recoil сразу
const LoginWrapper = () => {
const setToken = useRecoilCallback(({ set }) => token => {
set(tokenState, token);
});
return <Login setToken={setToken} />;
};
Обратите внимание: основное различие между использованием setRecoilState
и setRecoilCallback
заключается в том, что использование setRecoilState
автоматически подписывает потребляющий компонент на атом изменяется, а setRecoilCallback
не подписывается на него, поэтому вы можете избежать некоторых рендеров.
Вы можете найти оба решения в этом рабочем CodeSandbox . Как видите, компонент PrintToken
повторно отображается правильно, как только компонент Login
обновляет токен.
Сообщите мне, если вам понадобится дополнительная помощь ?