Я использую 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>
)
}
}
У меня есть много связанных с d3 переменных внутри компонентаDidMount, на который выполняется функция reset(). Что такое «Способ реагирования» на предоставление функции reset() доступа к этим переменным, если я вытаскиваю его из области componentDidMount()? – Groovietunes
@Groovietunes Зависит от того, что происходит в этой функции, которую вы здесь не показываете. Если у вас нет состояния, вы можете просто поместить все, что в настоящее время находится в 'componentDidMount', в свой собственный метод экземпляра' myReset =() => {...} ', а затем просто выполнить' this.myReset() 'как в' componentDidMount' и 'componentWillReceiveProps' (как показано выше) – Jack