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）传递信息，因为在父组件和子组件之间有一个组件，一个组件在导航栏中，另一个在主体中，我认为这是一个肮脏的解决方案。

谢谢

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

0 个答案: