javascript - ReactJS 中的组件状态

Question

首先，我是 ReactJS 的新手。我想在我的 MapComponent 中显示标记。我做了这项工作，但说实话，我认为应该有更好的方法来做到这一点......我从父组件获取 props，它们是从 JSON 加载的。我想将每个项目的坐标(来自 JSON)传递到 MapComponent 中状态标记中。我对谷歌地图使用了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

由于你是通过 props 传递你的状态，你可以避免创建一个组件类，你实际上只需要一个简单的代表性组件，它从 0.14 开始支持(我猜测)。这个代表性组件只是函数，代表render函数。该函数将 props 作为参数

这样你的组件就会看起来更干净:

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>);
}