javascript - ReactJS 使用 getElementById 与库集成

Question

使用需要直接访问 DOM 的库(例如 document.getElementById())呈现组件的最佳方法是什么？目前，由于 setTimeout ，我的工作正常了:

class MyComponent extends React.Component {
    render(){
        setTimeout(function(){
            myCoolGraphLibrary.createChart({
                container : "myChartContainer",
                series : [...],
                ...
            });    
        },1000);
        return (<div id="myChartContainer"></div>);
    }
}

没有 setTimeout，容器在 DOM 中尚不可用，因此对 createChart 的调用失败。

是否有更好的设计模式来实现这一目标？

Answer 1

使用生命周期方法。 https://facebook.github.io/react/docs/component-specs.html

特别是，您需要使用 componentDidMount 来运行任何依赖于现有 DOM 元素的代码。如果您要添加事件监听器，请务必在 componentWillUnmount

中移除它们

编辑:为了回应您的评论，您的代码将如下所示:

class MyComponent extends React.Component {
    componentDidMount() {
        myCoolGraphLibrary.createChart({
            container : "myChartContainer",
            series : [...],
            ...
        });
    }
    render() {
        return (<div id="myChartContainer"></div>);
    }
}