reactjs - 在 React 中使用 Context API 和功能组件作为服务

Question

我有一个上下文 API:

import React, { createContext, useState } from "react";

const UserContext = createContext();

const UserContextProvider = (props) => {
    const [userInfo, setUserInfo] = useState({});

    return (
        <UserContext.Provider value={{ userInfo, setUserInfo }}>
            {props.children}
        </UserContext.Provider>
    )
};

export { UserContextProvider, UserContext };

并在 App.js 中使用它:

<UserContextProvider>
  // Router,...
</UserContextProvider>

好吧，我将在像服务一样的组件中使用上下文 API:

import { UserContext } from "...";

function UserService() {
    const { userInfo, setUserInfo } = useContext(UserContext);


    const updateUserInfo = (newUserInfo) => {
         setUserInfo(newUserInfo); // for example: {name:'x'}
    }

    return null;
}

现在我想用 UserService在组件内部不添加 <UserService /> ?怎么打电话 UserService.updateUserInfo() ?

Answer 1

你不需要userService .您可以使用UserContext直接在里面 App.js并访问其功能，但您必须包装 App.js内UserContextProvider喜欢:

<UserContextProvider>
   <App />
</UserContextProvider>

或者您可以使用 HOC(higher order component)喜欢:

const withUsersContext = (Comp) => {
    return (props) => (
        <UserContextProvider>
            <Comp {...props} />
        </UserContextProvider>
    );
};

// then inside App.js:
...
export default withUsersContext(App)

现在在里面 App.js :

const { userInfo, setUserInfo } = useContext(UserContext);

注意:如果你想使用 UserContext在类似 UserService 的东西里面您必须为 UserService 编写自定义 Hook ( rules of react-hooks )。

定制 Hook UserService :

function useUserService() {
    const { userInfo, setUserInfo } = useContext(UserContext);

    const updateUserInfo = (newUserInfo) => {
         setUserInfo(newUserInfo);
    }

    return { updateUserInfo };
}

如何在组件内部使用:

...
const { updateUserInfo }= useUserService();
...