reactjs - 如何将带有上下文子项的信息传递给父项

Question

我正在尝试将信息从子组件传递到父组件，它们都是不同的文件并且位于不同的文件夹中。

我正在使用消费者和提供者的上下文。当孩子是消费者并且提供者是父母时，它可以工作。但我想将信息传递给作为生产者的孩子和作为消费者的父母。

我使用以下代码创建了一个名为 contexts 的文件夹，其中包含一个名为 MapContext.js 的文件：

import React from 'react';

const MapContext = React.createContext(null);

export default MapContext;

子组件称为 Map.js，当状态更改传递信息时，您可以在此处看到：

render() {
    const { lng, lat, zoom } = this.state;
    return (
      <MapContext.Provider value={zoom} >
        <div className="Menu">
          <MenuInfo lng={lng} lat={lat} zoom={zoom} />
          <PitchComponent map={this.map} />
          <div id="map" />
        </div>
      </MapContext.Provider>
    );
}

父组件称为导航栏，其中有一个按钮来创建模式组件以显示所有信息。

render() {
    return (
      <MapContext.Consumer>
      { context => ( console.log(context) ) }
      </MapContext.Consumer>
    )
}

但是，始终返回 null。不接收信息。我该如何解决？

如果不可能......我该怎么做？创建一个活动来订阅我？？我不想使用 this.props.parent(info) 传递信息，因为父组件和子组件之间有一个组件，一个组件在导航栏中，另一个在正文中，我认为这是一个肮脏的解决方案。

谢谢

标签： reactjs