美文网首页React
React-Hook:useContext

React-Hook:useContext

作者: Melody_28a2 | 来源:发表于2021-01-12 13:10 被阅读0次

useReact的应用场景:在组件间共享状态

假设现在有两个组件,想要共享状态,可以使用React.createContext创建一个context对象,为了方便在所有的组件中共享状态,我将创建context的文件抽离为 creatContext.js

#creatContext.js 

import { createContext } from 'react'

const FatherContext = createContext()

export default FatherContext;

组件1:

# Child1
import React, { useContext } from 'react'
import FatherContext from '../context/creatContext'

export default function Child1() {
  const { username } = useContext(FatherContext)

  return (
    <>
      <h1>child1的username============={username}</h1>
    </>
  )
}

组件2:

#Child2
import React, { useContext } from 'react'
import FatherContext from '../context/creatContext'

export default function Child2() {
  const { username } = useContext(FatherContext)

  return (
    <>
      <h1>Child2的username============={username}</h1>
    </>
  )
}

父组件:

# FatherCom
import React from 'react'
import Child1 from './child1'
import Child2 from './child2'
// context对象
import FatherContext from '../context/creatContext'
export default function FatherCom() {
  return (
    <div>
      我是父组件
      <FatherContext.Provider value={{ username: '小明小红' }}>
        <div>
          <Child1></Child1>
          <Child2></Child2>
        </div>
      </FatherContext.Provider>
    </div>
  )
}

运行结果


image.png

文件结构:


image.png

相关文章

  • React-Hook:useContext

    useReact的应用场景:在组件间共享状态 假设现在有两个组件,想要共享状态,可以使用React.createC...

  • react-hook

    react-hook

  • React Hook之useContext的介绍与使用

    useContext const context = useContext(Context);接受一个 conte...

  • react-hooks: useContext

    React的useContext应用场景: 如果需要在组件之间共享状态,可以使用useContext()。 举个?...

  • useContext

    props和useContext的区别:useContext可以很方便的跨越多个层级共享state,props需要...

  • 7.React Hook之useContext的介绍与使用

    React的useContext应用场景: 如果想要组件之间共享状态,可以使用useContext。React 的...

  • react中 useContext 和useReducer的使用

    useContext和useReducer 可以用来减少层级使用, useContext,可以理解为供货商提供一个...

  • useContext

    接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前...

  • useContext

    上下文 全局变量是全局的上下文 上下文是局部的全局变量 使用方法 const Context = createCo...

  • useContext

    https://dmitripavlutin.com/react-context-and-usecontext/ ...

网友评论

    本文标题:React-Hook:useContext

    本文链接:https://www.haomeiwen.com/subject/fdwsaktx.html