组件间通信方式-context

组件之间通常会遇到兄弟组件之间传递参数 ,最简单的方式可能是统一交给父组件处理, 然后再把数据交给下面的子组件, 我们可以通过contex来进行兄弟组件之间数据传输

• 首先我们先创建context容器对象
  testContext.js

// Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树
import * as React from 'react';
export const TestContext = React.createContext()

• 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：

children2 想要使用children1的数据
index.js

import React, { Component, useState, useEffect } from 'react'
import { TestContext } from './testContext'
import Children1 from './children1'
import Children2 from './children2'

const Test = () => {
  const [children1Value, setChildren1Value] = useState('')
  return <TestContext.Provider value={{ setChildren1Value}}>
    <div>
      <Children1  />
    </div>
    <hr />
    <div>
      <Children2 children1Value={children1Value} /> // 拿到children1的值, 通过父传子传递给children2
    </div>
  </TestContext.Provider>
}

export default Test

children1.js

import React, { useState, useEffect } from 'react'
import { TestContext } from './testContext'

const Children1 = () => {
  const [iptvalue, setIptvalue] = useState('')
  const [children2Value, setChildren2Value] = useState('')
  const context = React.useContext(TestContext)  // 重点
  useEffect(() => {
    console.log('context', context?.setChildren1Value(iptvalue))
    context?.setChildren1Value(iptvalue)  // 重点
  }, [iptvalue]);
  return <>
    <p> 我改变了值需要children2根据我的数据变化进行展示</p>
    <input value={iptvalue} onChange={(e) => { setIptvalue(e.target.value) }} />
  </>

}
export default Children1

children2.js

import React, { useState } from 'react'

const Children2 = (props) => {
  return <>
    <p>我拿到了children1的值 , 它的值是: <em>{props.children1Value}</em></p>
  </>

}
export default Children2

同理如果children1.js也需要使用children2中的值使用同样的方式修改jsx

官网有提到何时使用context, Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据, 使用context 可以避免通过中间元素传递props:
还是刚刚的例子只是这次有三层子组件

import React, { useState, useEffect } from 'react'
import { TestContext } from './testContext'
 const TestContext = React.createContext()
 const Test = () => {
  const [children1Value, setChildren1Value] = useState('')
  const [children2Value, setChildren2Value] = useState('')

  return <TestContext.Provider value={{ setChildren1Value, setChildren2Value, children1Value }}>
    <div>
      <Children1 children2Value={children2Value} />
    </div>
    <hr />
    <div>
      <Children2 children1Value={children1Value} />
    </div>
  </TestContext.Provider>
}
const Children1 = (props) => {
  const [iptvalue, setIptvalue] = useState('')
  const context = React.useContext(TestContext)
  useEffect(() => {
    context?.setChildren1Value(iptvalue)
  }, [iptvalue]);
  return <>
    <p> 我改变了值需要children3根据我的数据变化进行展示</p>
    <input value={iptvalue} onChange={(e) => { setIptvalue(e.target.value) }} />
  </>
}

const Children2 = (props) => {
  return <>
    <Children3 />
  </>
}

const Children3 = () => {
  const context = React.useContext(TestContext)
  console.log(context)
  return <>
    children1的值是{}
  </>
}

不需要一层一层传递props即可拿到

如果是类组件
使用context的地方记得声明接收context
static contextType = TestContext
const {children1Value} = this.context

也可参考官网 示例 https://zh-hans.reactjs.org/docs/context.html