请教一下,a,b两个兄弟组件,a组件按钮click后怎么获取b组件的数据?

Question

react hooks项目中a,b两个兄弟组件,a组件按钮click后获取b组件的数据, 我使用redux来提升状态, 但是b组件中什么时机去更新store呢?

Answer 1

兄弟之间通信，可以把父组件当作中间件，先给父组件传，再从父组件传给另一个兄弟

父组件：
import Son1 from './Son1' //引入子组件
import Son2 from './Son2' //引入子组件
import { useState } from 'react'

function Father(){
    let [text, setText] = useState(0)
    const getHandle = (num) => {
            console.log('兄弟说给text加上：', num)
            setText(text+num)
       }
    return (
    <>
      <Son1 text={text}></Son1>
      <Son2 add={getHandle}></Son2>
    </>
  )
}
export default Father

子组件1：
// props={text,emitHandle}
function Son1({text,emitHandle}){
    return (
    <>
      <p>父亲传过来的：{text}</p> //这里使用父亲传过来的text 通过兄弟来改变值
    </>
  )
}
export default Son1

子组件2：
// props={text,emitHandle}
function Son2({text,emitHandle}){
    return (
    <>
      <button onClick={() => emitHandle(1)}>给兄弟加1</button>
    </>
  )
}
export default Son2

可以使用全局公共变量 createContext / useContext ，将变量作为公共的，一个地方改变另一个地方也会跟着改变

父组件：content.js
import Son1 from './Son1' //引入子组件
import { useState,createContext } from 'react'

export const CountContext = createContext({}) //创建数据源  关键

function Father(){
    let [title, setTitle] = useState('公共数据')
     const changeCom = (value) => {
        setTitle((title = value))
    }
    return (
    <>
     //使用CountContext.Provider包裹子组件 value 是公共使用的数据  可以通过传递函数进行你想要的一些操作
     // CountContext也就是你上面自己取的名字
     <CountContext.Provider value={{ title,change:(value)=>changeCom(value) }}>
          <Son1></Son1>
      </CountContext.Provider>
      <button onClick={() => changeCom('我是父亲，我修改了公共数据')}></button>
    </>
  )
}
export default Father

子组件：Son1.js
import { useContext } from 'react'
import { CountContext } from './content'  // 关键

// props={text}
function Son1(){
    let data = useContext(CountContext) // 获取公共数据  关键
    return (
    <>
      <p>{data.title}</p> //使用公共数据
       <button onClick={() => data.change('我是儿子，我修改了公共数据')}></button>
    </>
  )
}
export default Son1

Answer 2

我设想一下你遇到的情景：一个表单（Form）为父组件，一个Input（a组件），一个Button（Input的兄弟组件，b组件）。点Button的时候，需要拿到Input的value。

1、第1个问题，b组件什么时候更新store。b中的value中只要有变动，就应该更新到store
2、第二个问题，a组件直接实时从store取b更新过去的value，不需要等到点击的时候再去取。