Question

首先，我是ReactJS的新手。我想在MapComponent中显示标记。我做了这个工作，但说实话，我认为应该有更好的方法来做到这一点...... 我从父组件获取道具，从JSON加载它们。我想将每个项目（从我的JSON）的坐标传递到MapComponent中的状态标记。我为Google地图使用了react-google-maps解决方案。也许有人可以给我一些建议，在这种情况下最好的方法是什么？非常感谢任何提示！

export class MapComponent extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
        markers: []
    }
  }


  getMarkers() {
    if (this.props.data.rows) {
      var markers = this.props.data.rows.map(function(item, i) {
        return {
          position: {
            lat: item.coordinate[0],
            lng: item.coordinate[1]
          },
          item: item
        }
      });
      this.setState({
        markers: markers
      });
    }
  }
  shouldComponentUpdate(nextProps, nextState) {
    return true;
  }
  componentDidUpdate() {
    this.getMarkers();
  }

  render() {
    return (
      <div className={styles.map}>
      <GoogleMapLoader
        containerElement={
          <div
            {...this.props}
            style={{
              height: "100%",
            }}
          />
        }
        googleMapElement={
          <GoogleMap
            ref={(map) => console.log(map)}
            defaultZoom={9}
            defaultCenter={{lat: 52.379189, lng: 4.899431}}>
            {this.state.markers.map((marker, index) => {
              return (
                <Marker
                {...marker}
                />
              );
            })}
          </GoogleMap>
        }
      />
      </div>
    );
  }
}

Answer 1

由于您通过道具传递您的状态，您可以卵形创建组件类，您实际上只需要一个简单的代表性组件，它自0.14起支持（I猜测）。这个代表性组件只是函数，代表render函数。此函数将props作为参数

所以你的Component会看起来更干净：

const MapComponent = (props) => {
  return (
    <div className={styles.map}>
      <GoogleMapLoader
        containerElement={
          <div
            {...props}
            style={{height: "100%"}}
          />
        }
        googleMapElement={
          <GoogleMap
            ref={(map) => console.log(map)}
            defaultZoom={9}
            defaultCenter={{lat: 52.379189, lng: 4.899431}}>
              {props.data.rows.map((item, index) => {
                const position = {
                  lat: item.coordinate[0],
                  lng: item.coordinate[1]
                };

                return (
                  <Marker
                    key={index}
                    position={position}
                    item={item}
                  />
              );
            })}
          </GoogleMap>
        }
      />
    </div>);
}

Answer 2

首先，正如@webdeb所说，最好使用道具发送正确的数据。状态的使用导致不必要的重新绘制组件。其次，如果出于某种原因，您需要处理道具和状态，componentDidUpdate方法不适用于此目的，您应该将其替换为componentWillReceiveProps

类似的东西：

import React, {Component} from 'react';
export class MapComponent extends Component {

    constructor(props) {
      super(props)
      this.state = {
          markers: []
     }
    }
    componentDidMount() {
        this.getMarkers(this.props);
    }
    componentWillReceiveProps(nextProps){
        if(this.props.data!==nextProps.data){
            const markers = this.getMarkers(nextProps);
            this.setState({
               markers: markers
            });
        }
    }

    getMarkers(props) {
        let markers = [];
        if (props.data.rows) {
            markers = props.data.rows.map(function(item, i) {
              return {
                 position: {
                   lat: item.coordinate[0],
                   lng: item.coordinate[1]
                 },
                 item: item
              }
           });

        } 
        return markers;
     }
 }

ReactJS

2 个答案: