使用共享服务将值传递给同级组件

// DataService.js
class DataService {
  constructor() {
    if (!DataService.instance) {
      this.data = {};
      DataService.instance = this;
    }
    return DataService.instance;
  }

  setData(key, value) {
    this.data[key] = value;
  }

  getData(key) {
    return this.data[key];
  }
}

const instance = new DataService();
Object.freeze(instance);
export default instance;

// ComponentA.js
import React, { useEffect } from 'react';
import DataService from './DataService';

const ComponentA = () => {
  useEffect(() => {
    DataService.setData('key', 'value');
  }, []);

  return <div>Component A</div>;
};

export default ComponentA;

// ComponentB.js
import React, { useEffect, useState } from 'react';
import DataService from './DataService';

const ComponentB = () => {
  const [data, setData] = useState('');

  useEffect(() => {
    setData(DataService.getData('key'));
  }, []);

  return <div>Component B: {data}</div>;
};

export default ComponentB;

// 使用不可变数据结构
setData(key, value) {
  this.data = {
    ...this.data,
    [key]: value,
  };
}