在一个组件中具有数组。并希望其他组件能够访问此数组。他们不是亲子关系。我正在使用路由

// 创建一个 Context
const ArrayContext = React.createContext();

// 提供者组件
class ArrayProvider extends React.Component {
  state = {
    array: [1, 2, 3, 4, 5]
  };

  render() {
    return (
      <ArrayContext.Provider value={this.state.array}>
        {this.props.children}
      </ArrayContext.Provider>
    );
  }
}

// 消费者组件
class SomeComponent extends React.Component {
  static contextType = ArrayContext;

  render() {
    const array = this.context;
    return <div>{array.join(', ')}</div>;
  }
}

// 在应用的顶层包裹提供者
function App() {
  return (
    <ArrayProvider>
      <SomeComponent />
    </ArrayProvider>
  );
}

// 设置数组
localStorage.setItem('sharedArray', JSON.stringify([1, 2, 3, 4, 5]));

// 获取数组
const array = JSON.parse(localStorage.getItem('sharedArray'));

// 设置路由时传递数组
<Route path="/somepath" render={() => <SomeComponent array={[1, 2, 3, 4, 5]} />} />

// 在组件中访问数组
class SomeComponent extends React.Component {
  render() {
    const { array } = this.props;
    return <div>{array.join(', ')}</div>;
  }
}

const EventEmitter = require('events');
const eventEmitter = new EventEmitter();

// 发布事件
eventEmitter.emit('arrayUpdate', [1, 2, 3, 4, 5]);

// 订阅事件
eventEmitter.on('arrayUpdate', (array) => {
  console.log(array);
});