unstated-next 使用
2022/8/30 23:25:02
本文主要是介绍unstated-next 使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
//count-context.tsx import { useState } from 'react' import { createContainer, useContainer } from 'unstated-next' interface CounterProps { count: number increment: () => void decrement: () => void } function Counter(initialState = 0): CounterProps { const [count, setCount] = useState(initialState) const decrement = () => setCount(count - 1) const increment = () => setCount(count + 1) return { count, decrement, increment } } export const CounterContainer = createContainer(Counter) export function useCounter() { return useContainer(CounterContainer) }
import { useCounter, CounterContainer } from './count-context' function Counter1() { const { count, decrement, increment } = useCounter() return ( <div> <button onClick={decrement}>-</button> <span>1.you click {count} times</span> <button onClick={increment}>+</button> </div> ) } function Counter2() { const { count, decrement, increment } = useCounter() return ( <div> <button onClick={decrement}>-</button> <span>2.you click {count} times</span> <button onClick={increment}>+</button> </div> ) } export default function Index() { return ( <CounterContainer.Provider initialState={10}> <Counter1 /> <Counter2 /> <div> <CounterContainer.Provider> <Counter1 /> <Counter2 /> </CounterContainer.Provider> </div> </CounterContainer.Provider> ) }
这篇关于unstated-next 使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-01为什么公共事业机构会偏爱 TiDB :TiDB 数据库在某省妇幼健康管理系统的应用
- 2024-04-26敏捷开发:想要快速交付就必须舍弃产品质量?
- 2024-04-26静态代码分析的这些好处,我竟然都不知道?
- 2024-04-26你在测试金字塔的哪一层?(下)
- 2024-04-26快刀斩乱麻,DevOps让代码评审也自动起来
- 2024-04-262024年最好用的10款ER图神器!
- 2024-04-2203-为啥大模型LLM还没能完全替代你?
- 2024-04-2101-大语言模型发展
- 2024-04-17基于SpringWeb MultipartFile文件上传、下载功能
- 2024-04-14个人开发者,Spring Boot 项目如何部署