我們來說一個屬性 useContext
這個確實用的挺少的 不過 還是簡單做一下
打開我們的react項目 在src下創建一個文件夾 components 因為他是兩個 甚至多個組件之間使用的
然后在components下創建兩個組件 分別叫 dom.jsx dom1.jsx 命名命的比較不規范 不過本身只是做個案例 懶得做那么規范了

dom.jsx 我們作為父組件 編寫代碼如下

import React from "react";
import Daom1 from "./dom1";

export const MyComponent = React.createContext();

const dom = () => {
  return (
    <div>
      <MyComponent.Provider value="hello dom1">
        <Daom1 />
      </MyComponent.Provider>
    </div>
  );
};

export default React.memo(dom);

這里 我們通過MyComponent.Provider中vulue 定義了個數據 值是字符串類型的 hello dom1
然后調用了 我們的 dom1 組件 作為自己的子組件

然后 我們dom1 代碼編寫如下

import React, { useContext } from "react";
import { MyComponent } from "./dom";

const Dom1 = () => {
  const contextValue = useContext(MyComponent);
  return (
    <div>
      <h1>{contextValue}</h1>
    </div>
  );
};

export default React.memo(Dom1);

獲取 同目錄dom1組件中導出的 MyComponent 對象 通過useContext輸出其中的值

然后 在App根組件中調用dom.jsx組件
項目運行結果如下

可以看到 dom MyComponent.Provider value 中定義的值 然后在 dom1中獲取 在h1中顯示 整個過程非常完美 不過這個數據共享方案老實說 挺撈的 用的會少一些 因為限制很多 也不知道實用