ReactJS의 구성 요소 상태

Question

우선 ReactJS에서 새로 생겼습니다. MapComponent에 마커를 표시하고 싶습니다. 나는이 일을했지만 솔직히 말해서 더 좋은 방법이 있어야한다고 생각합니다 ... JSON에서로드 된 상위 구성 요소에서 소품을받습니다. 각 항목의 좌표를 내 JSON에서 내 MapComponent의 상태로 마커로 전달하고 싶습니다. Google지도에 반응 Google지도 솔루션을 사용했습니다. 누군가이 케이스에서 가장 좋은 방법이 무엇인지 조언 해 줄 수 있습니까? 모든 팁을 가져 주셔서 감사합니다. 0.14는 (제 생각 엔) 이후 소품을 통해 상태를 통과하기 때문에

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

, 당신이 구성 요소 클래스를 만드는 난형 수 있습니다, 당신은 실제로 단순한 재현 구성 요소 필요가 지원됩니다. 이 표현 구성 요소은 단지 기능이며, render 함수를 나타냅니다. 이 기능은 그래서 당신은 구성 요소보다 깨끗한 모양

PARAM

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

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