Question

我正在使用反应上下文。首先，我给上下文默认值，然后给Context.Provider不同的值。但消费者仍然可以使用默认值

传递通知的HOC（目前只是一个简单的字符串）

export const NotificationContext = React.createContext<string>('default');

function withNotifications<T>(WrappedComponent: React.ComponentType<T>) {

    return class ComponentWithTheme extends React.Component<T, { data: any }> {
        public render() {
            return (
                <NotificationContext.Provider value={'value'}>
                    <WrappedComponent {...this.props as T} />
                </NotificationContext.Provider>
            );
        }
    };
}

export default withNotifications;

消费者


const Topbar: React.FC<TopbarProps> = props => {
    //const [isNotificationOpen, setIsNotificationOpen] = useState(false);
    //const [unreadCount, setUnreadCount] = useState(0);

    const notificationContext = useContext(NotificationContext);
    useEffect(() => {
        console.log(notificationContext);
    }, Object.values(notificationContext));

    console.log(notificationContext);


    return (
        <div>topBar</div>  );
};
export default Topbar;

我仍然得到“默认”字符串而不是“值”

Answer 1

您对提供者的价值应该是一个对象，

const value = {
 name: "kim"
}
 <NotificationContext.Provider value={value}>
  <WrappedComponent {...this.props as T} />
 </NotificationContext.Provider>

React context.provider不会更改默认值

1 个答案: