跨组件通信

目录

• props
• context
• 自定义Hook/ localStorage
• 自定义事件机制 ：https://blog.csdn.net/Fuohua/article/details/80164674
• redux

【props】

案例：

现在有三个组件层层嵌套，分别是 父组件A,子组件B,孙组件C, 父组件A 的数据需要传递给孙组件C，一般地可以用props层层传递：

A组件

import B from './B';

export default function A() {
    const ownState = 'Hello'
  return (
      <>
        <h2>A组件</h2>
      <div>值：{ownState}</div>
      <B state={ownState}></B>
    </>
  );
}

B组件

import C from './C';

export default function Father(props) {
  const { state } = props;
  return (
      <>
           <h2>B组件</h2>
      <div>值来自A: {state}</div>
      <C state={state}></C>
    </>
  );
}

组件

export default function Son(props) {
  const { state } = props;
  return (
    <>
         <h2>C组件</h2>
      <div>值来自B: {state}</div>
    </>
  );
}

【context】

当跨越多个层级的两个组件需要通信时，通过props层层传递就显得不合适了，React 提供了 Context API 来简化这一过程。Context 提供了一种在组件间共享数据的方式，而不需要显示地逐层传递。

案例：函数组件

利用 Context API,可以直接从 A组件传递数据到 C组件

A组件

import B from './B';
import React from 'react';
export const { Provider, Consumer } = React.createContext('Hello');

export default function A() {
  const ownState = 'Hello';
  return (
    <Provider value={ownState}>
      <h2>A组件</h2>
      <div>A:{ownState}</div>
      <B></B>
     </Provider>
  )
}

B组件

import C from './C';
import { Consumer } from './A';
export default function B() {
  return (
    <Consumer>
      {(value) => {
        return <>
            
          <h2>B组件</h2>
          <div>来自A:{value}</div>
            <C></C>
        </>
      }}
    </Consumer>
  );
}

C组件

import { Consumer } from './A';
export default function C() {
  return (
    <Consumer>
      
      {(value) => {
        return <>
           <h2>C组件</h2>
          <div>来自A:{value}</div>
        </>
      }}
    </Consumer>
  );
}

注意，在函数组件中订阅 context，需要将函数作为子组件，即render props模式

链接

react跨组件传递数据