Javascript React父函数调用子'；s嵌套的componentDidMount函数？

我将D3与react一起使用，每当父级运行handleClick（）时，或者如果切换状态更改，我需要运行resize函数。最好的方法是什么？ 父组件

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

类包装器扩展组件{
建造师（道具）{
超级（道具）；
此.state={
切换：真
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
如果（！this.state.toggle）{
this.setState（{toggle:true}）
}否则{
this.setState（{toggle:false}）
}
}
render（）{
const toggled=this.state.toggle？'toggled'：''；
返回(
);
}
}

子组件

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

class UnitedStatesMap扩展组件{
构造函数（）{
超级（）；
此.state={
activeState:d3.select（空）
};
}
shouldComponentUpdate（）{
返回false；
}
componentDidMount（）{
函数resize（）{
if（activeState[0][0]）{reset（）}；
宽度=document.getElementById（'page-content-wrapper'）。offsetWidth；
高度=宽度*比例；
投影
.translate（[宽度/2，高度/2]）
.刻度（宽度）；
svg
.style（'width'，`${width}px`）
.style（'height'，`${height}px`）
选择（'rect'）
.attr（'width'，width）
.attr（'height'，height）
g、 选择all（'.state'）.attr（'d'，path）；
}
render（）{
返回(
)
}
}

在

包装中

传递

切换

到

UnitedStatesMap

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

---

显然，您必须将

resize

函数移动到它自己的实例方法中，然后在

componentDidMount

中调用它，

componentWillReceiveProps

我在componentDidMount中有很多与d3相关的变量，reset（）依赖于这些变量。给出reset（）的“反应方式”是什么如果我将这些变量从componentDidMount（）的作用域中拉出，那么对这些变量的访问权？@Groovietunes取决于您在这里没有显示的函数中发生的所有事情。如果您没有状态，那么您可以将当前在

componentDidMount

中的所有内容放入其自己的实例方法

myReset=（）=>{…}

然后在

componentDidMount

和

componentWillReceiveProps中执行
this.myReset（）
（如上所示）
componentWillReceiveProps(nextProps) {
  if (this.props.toggle !== nextProps.toggle) {
    // call resize
  }
}