2016-08-05 4 views
1

Я использую D3 с реакцией, и мне нужно запустить функцию изменения размера всякий раз, когда handleClick() запускается родительским или, возможно, просто, если изменяется состояние переключения. Каков наилучший способ приблизиться к этому? Родитель КомпонентReact parent function вызывает функцию дочернего компонента ComponentDidMount?

class Wrapper extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      toggle: true 
     }; 
     this.handleClick = this.handleClick.bind(this); 
    } 
    handleClick() { 
     if (!this.state.toggle) { 
      this.setState({toggle: true}) 
     } else { 
      this.setState({toggle: false}) 
     } 
    } 
    render() { 
     const toggled = this.state.toggle ? 'toggled' : ''; 
     return (
      <div id="wrapper" className={toggled}> 
       <UnitedStatesMap /> 
      </div> 
     ); 
    } 
} 

Детский компонент

class UnitedStatesMap extends Component { 
    constructor() { 
     super(); 

     this.state = { 
      activeState: d3.select(null) 
     }; 
    } 

    shouldComponentUpdate() { 
     return false; 
    } 

    componentDidMount() { 
     function resize() { 
      if(activeState[0][0]) { reset() }; 
      width = document.getElementById('page-content-wrapper').offsetWidth; 
      height = width * mapRatio; 

      projection 
       .translate([width/2, height/2]) 
       .scale(width); 

      svg 
       .style('width', `${width}px`) 
       .style('height', `${height}px`) 

      svg.select('rect') 
       .attr('width', width) 
       .attr('height', height) 

      g.selectAll('.state').attr('d', path); 
     } 
     render() { 
      return (
       <div id="map" ref="map"></div> 
      ) 
     } 
} 

ответ

1

В Wrapper проход toggle в UnitedStatesMap

<UnitedStatesMap toggle={this.state.toggle} /> 

В UnitedStatesMap добавить

componentWillReceiveProps(nextProps) { 
    if (this.props.toggle !== nextProps.toggle) { 
    // call resize 
    } 
} 

Очевидно, что вы должны переместить resize функцию в свой собственный метод экземпляра, а затем просто назвать его в componentDidMount и componentWillReceiveProps.

+0

У меня есть много связанных с d3 переменных внутри компонентаDidMount, на который выполняется функция reset(). Что такое «Способ реагирования» на предоставление функции reset() доступа к этим переменным, если я вытаскиваю его из области componentDidMount()? – Groovietunes

+0

@Groovietunes Зависит от того, что происходит в этой функции, которую вы здесь не показываете. Если у вас нет состояния, вы можете просто поместить все, что в настоящее время находится в 'componentDidMount', в свой собственный метод экземпляра' myReset =() => {...} ', а затем просто выполнить' this.myReset() 'как в' componentDidMount' и 'componentWillReceiveProps' (как показано выше) – Jack

Смежные вопросы