reactjs - 反应谷歌地图

Question

有人可以让我知道如何更改来自默认属性的 defaultCenter。如何更改默认属性并动态地从服务器提供值。

class SimpleMap extends React.Component {
    static defaultProps = {
        center: {lat: 59.95, lng: 30.33},
        zoom: 11
    };

    render() {
        return (
            <GoogleMapReact
            defaultCenter={this.props.center}
            defaultZoom={this.props.zoom}
            >
        )
    }
}

Answer 1

请 defaultCenter从默认道具移动到组件状态。

constructor(props) {

    super(props)
    this.state = {
      center: {
        lat: 59.95,
        lng: 30.33
      },
      zoom: 11
    }
  }

使成为

render() {
    return (
      <GoogleMapReact
       defaultCenter={this.state.center} //access here using state
       defaultZoom={this.state.zoom}
     />);
  }

每当您想要更新center和zoom值时，只需使用状态更新setState，组件将使用新的更新值重新渲染。

使用 Redux：

使用 redux，此值将来自您的组件容器映射，通过 reducer 存储。