Question

我无法在Google Maps组件上使用从父组件到子组件的状态。这听起来可能是一个非常基本的问题，但是我试图理解一个工作道具与另一个工作道具之间的区别。

所以我有一个Google Maps组件（从“ google-map-react”导入GoogleMapReact）

static defaultProps = {
    center: { lat: 62.10281, lng: -84.14565 },
    zoom: 11
  };

  constructor(props) {
   console.log(props);       
    super(props);
  }

  render() {

      return (
        <div className='google-map' style={{ height: '100%', width: '100%' }}>
          <GoogleMapReact
            bootstrapURLKeys={{ key: 'somekey' }}
            center={this.props.center}
            defaultZoom={ this.props.zoom }>
            <AnyReactComponent
              lat={ this.props.lat }
              lng={ this.props.lng }
              text={ 'Wheres Waldo?' }
            />
          </GoogleMapReact>
        </div>
      )
  }

然后从父组件开始

<MapComponent lat={this.state.latitude} lng={this.state.longitude}
                    center={{lat: this.state.latitude, lng: this.state.longitude}}

我已经在构造函数中检查了lat，lng和center的值，并且我得到它们，因为预期的映射仍然无法正常工作

但是，如果我将中间的值硬编码为lat和lng从状态获取值，那么它确实可以工作。

现在这行得通，有人可以解释一下这个概念，区别以及如何克服它吗？感谢您的帮助。

<MapComponent lat={this.state.latitude} lng={this.state.longitude}
                    center={{lat: 62.10281, lng: -84.14565}}

从父组件的状态在子组件中传递道具

0 个答案: