标签：count function const unstated next increment 使用 return decrement

//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>
  )
}

标签：count,function,const,unstated,next,increment,使用,return,decrement
来源： https://www.cnblogs.com/samsara-yx/p/16639635.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。