- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在一个站点上工作,该站点使用 zustand 将全局状态存储在一个文件中。 .我需要能够在类组件中设置该状态。我可以使用钩子(Hook)在功能组件中设置状态,但我想知道是否有办法将 zustand 与类组件一起使用。
如果有帮助,我已经为此问题创建了一个沙箱:
https://codesandbox.io/s/crazy-darkness-0ttzd
在这里,我在功能组件中设置状态:
function MyFunction() {
const { setPink } = useStore();
return (
<div>
<button onClick={setPink}>Set State Function</button>
</div>
);
}
我的状态存储在这里:
export const useStore = create((set) => ({
isPink: false,
setPink: () => set((state) => ({ isPink: !state.isPink }))
}));
如何在类组件中设置状态?:
class MyClass extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<button
onClick={
{
/* setPink */
}
}
>
Set State Class
</button>
</div>
);
}
}
最佳答案
类组件最接近钩子(Hook)的是高阶组件 (HOC) 模式。让我们翻译一下钩子(Hook)useStore
进入 HOC withStore
.
const withStore = BaseComponent => props => {
const store = useStore();
return <BaseComponent {...props} store={store} />;
};
我们可以将 store 作为一个 prop 访问到任何封装在
withStore
中的类组件中。 .
class BaseMyClass extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
const { setPink } = this.props.store;
return (
<div>
<button onClick={setPink}>
Set State Class
</button>
</div>
);
}
}
const MyClass = withStore(BaseMyClass);
关于reactjs - 如何在类组件中设置 zustand 状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66084662/
我想将经过身份验证的用户放入 zustand 商店。我使用 react-query 获得经过身份验证的用户,这会导致一些问题。我不确定我为什么要这样做。我希望与身份验证相关的所有内容都可以在钩子(Ho
我正在一个站点上工作,该站点使用 zustand 将全局状态存储在一个文件中。 .我需要能够在类组件中设置该状态。我可以使用钩子(Hook)在功能组件中设置状态,但我想知道是否有办法将 zustand
在ZUSTAND存储中,我有两个变量,比方说,Vara,Varb。我还有其他分量K,它只依赖于Varb,而不依赖于Vara。但问题是,当在ZUSTAND存储中将VARA设置为新值时,我的K分量被重新呈
我正在关注 Zustand wiki to implement testing ,但提供的解决方案不适用于应用程序呈现的基本测试。我的项目建立在 Electron React Boilerplate
我有Next 13应用程序,我正在使用zustand作为我的状态管理器,目前我有一个简单的布局,看起来像这样。对于MainProvider组件,它看起来如下所示,我计划将所有提供程序放在这里,并为zu
我是一名优秀的程序员,十分优秀!