Question

我已经构建了一个可以正常运行的应用程序（此处小样本：https://jsfiddle.net/mcneela86/nvtss60h/）。

现在我需要将组件分解为更易于管理/可重用的组件。目前，我有一个<Map />组件，其中所有逻辑都发生在一个组件内。

我想要的是这样的事情（https://jsfiddle.net/mcneela86/47581h2m/）：

<Map>
  <ScaleLine units="imperial" />
  <Layer source={...some-source...} />
</Map>

我遇到的问题是，在示例中，我需要从子组件访问父组件上的this.map以添加“缩放”行。

有没有办法可以从子组件访问父上下文？

我正在使用React 16和OpenLayers 4.

Answer 1

您可以通过道具将this.map对象传递给孩子。另请注意，componentDidMount在渲染后执行，因此您可能希望在构造函数中执行初始化。

class Map extends React.Component {
  constructor() {
    super();
       // .........
        // Add map, base view and layer
    this.map = new ol.Map({
      target: 'map',
      layers: [this.baseLayer],
      view: this.baseView
    });

    //......
  }

  render() {
    const { children } = this.props;
    let childrenWithProps = React.Children.map(children, child =>
    React.cloneElement(child, { mapObject: this.map }));

    return (
      <div id="map">
        {childrenWithProps}
      </div>
    );
  }
}

class ScaleLine extends React.Component {
  componentDidMount() {
    // Add scale line - not sure how to add to the parent context
    this.props.mapObject.addControl(new ol.control.ScaleLine({ units: this.props.units }));
  }

  render() {
    return '';
  }
}

Answer 2

好的，我想我明白了。我正在使用上下文，我知道它是实验性的，但我计划在不久的将来将其分解为单独的库/节点模块，因此我对所涉及的风险感到满意。

这是示例应用程序的小提琴（https://jsfiddle.net/mcneela86/fk250y38/），也是我想要的。我添加了两个ScaleLine子组件来帮助说明它是如何工作的。

基本上我已经采用了Dane关于将this.map代码移动到构造函数的注释，然后我使用React的上下文API（getChildContext方法）使this.map在使用{{1}之前可供后代使用生命周期方法，用于设置要显示的地图的目标DOM元素。

我还发现这个（https://www.youtube.com/watch?v=lxq938kqIss）YouTube视频确实非常有用，所以感谢'ReactCasts'的那些人。值得观看他们关于React上下文的两部分视频系列，以获得一个很好地解释上下文API的加号和减号的例子。

我希望将来可以帮助别人。

React OpenLayers父上下文

2 个答案: