在 React 中使用 recoil.js，在 class 组件中不使用钩子

Question

我是后坐力新手，我正在使用所有 class 组件。这是我的后坐力状态

export const tokenState = atom({
  key: "tokenState",
  default: "",
});

如何在class组件中使用recoil并设置token？我在应用程序中使用 RecoilRoot 作为

<RecoilRoot>
  <Header />
  <Main />
</RecoilRoot>

在login.js中，我想将令牌设置为后坐力，但是login.js是一个class组件。

const res = await APIS.login(apiRoute,requestObject);

在 res.data.token 中，我正在获取 jwt 令牌。

提前致谢！

Answer 1

Recoil.JS 是为了与 react hooks 一起使用，我认为它们除了 hooks 之外没有提供任何其他功能。如果您无法将 Login.js 更改为功能组件，请尝试使用包装功能组件，将令牌作为 prop 传递给 login.js 组件。

我建议 useRecoilState(myAtom)。

function LoginWrapper(props) {
    const [token, setToken] = useRecoilState(myAtom);

    useEffect(() => {
      async function get() {
         const { data: { token: jwt } } = await APIS.login(apiRoute,requestObject);

         setToken(jwt);
      }

      get();
    }, []);

    return <LoginComponent {...props} jwt={token} />
}

Answer 2

正如@Matt 所说，您必须将您的 class 组件包装成一个功能性组件，将 Recoil API 作为道具传递。

无论如何，如果你想从你的 Login 组件中设置原子标记，你可以简单地将 Login 包装到一个传递 useSetRecoilState[= 结果的组件中25=]

const LoginWrapper = () => {
  const setToken = useSetRecoilState(tokenState);
  return <Login setToken={setToken} />;
};

在更复杂的情况下，您可以利用 Recoil' useRecoilCallback 允许您一次使用整个 Recoil API

const LoginWrapper = () => {
  const setToken = useRecoilCallback(({ set }) => token => {
    set(tokenState, token);
  });

  return <Login setToken={setToken} />;
};

Please note: the main difference between using setRecoilState and setRecoilCallback is that using setRecoilState automatically subscribes the consuming component to the atom changes, while setRecoilCallback does not subscribe it so you could avoid some renders.

您可以在 working CodeSandbox 中找到这两种解决方案。如您所见，PrintToken 组件会在 Login 组件更新令牌后立即正确重新呈现。

如果您需要更多帮助，请告诉我

在 React 中使用 recoil.js，在 class 组件中不使用钩子

Using recoil.js in react, in class component without using hooks

reactjs

recoiljs