React 组件间的通信方式

1、父子组件间的通信

props

const Child = ({ name }) => {
    const handleClick = () => {
        childClick('Claire')
    }

    const refClick = () => {
        console.log('test')
    }

    return (
        <div>{name}</div>
        <button onClick={handleClick}>click</button>
    )
}

const Parent = () => {
    const childRef = useRef()

    const setName = (name) => {
        console.log(`现在我的名字是${name}`)
    }
    
    const refUse = () => {
        childRef.current.refClick()
    }
    
    return (
        <Child name={name} />
        <Child childClick={setName} />
        <Child ref={childRef} />
    )
}

两个子组件， 第一个向子组件传递的是值，第二个向子组件传递的是函数， 这样父组件就可以使用子组件的变量了,第三个向子组件传了一个引用， 通过引用可使用子组件的属性和方法

2、兄弟组件间通信

使用父组件当中间层

const Parent = () => {
    const [name, setName] = useState('Calire')
    return (
        <ChildA name={name} />
        <ChildB click={(val) => {setName(val)}}/>
    )
}

const ChildA = (props) => {
    const { name } = props
    return (
        <div>{name}</div>
    )
}
const ChildB = (props) => {
    const { name, click } = props
    return (
        <div>{name}</div>
        <button onClick={() => { click('Elan') }}>点我</button>
    )
}

全局属性

const ThemeContext = React.createContext('light');

function App {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    )
}

function Toolbar() {
    return (
        <div>
            <ThemedButton />
        </div>
    )
}

function ThemedButton () {
     static value = useContext(ThemeContext)
    return <Button theme={value} />
}