React componentDidMount中vegaEmbed提示元素不存在问题排查

核心问题 #

代码里的DOM元素ID写法错误：

• render方法中给div设置的id是#ForumActivityLineChart（多了CSS选择器的#前缀）
• vegaEmbed调用时用的选择器是#ForumActivityLineChart，这是在找**id为ForumActivityLineChart**的元素，但实际DOM里的元素id是#ForumActivityLineChart，两者不匹配导致找不到目标元素。

修复步骤 #

把render方法中div的id属性里的#去掉：

修改前：

<div id='#ForumActivityLineChart'></div>

修改后：

<div id='ForumActivityLineChart'></div>

完整修复后的组件代码 #

var ForumActivityTimeLine = React.createClass({
    componentDidMount: function () {
        this.showActivityLineChart()
    },

    showActivityLineChart() {
        const lineChartSpec = getForumActivityLineChart(this.props.data.frequency)
        const opt = {
            renderer: "canvas",
            actions: false
        };
        vegaEmbed('#ForumActivityLineChart', lineChartSpec, opt)
    }, 

    render() {
        return (
            <span>
                <h5 style={{ textAlign: "center", fontWeight: "bold", display: "block", paddingTop: '2em' }}> Forum Activity Timeline</h5>
                <div className="d-flex justify-content-around" style={{ paddingTop: "0.5em" }}>
                    <div id='ForumActivityLineChart'></div>
                </div>  
            </span>
        )
    }
})

补充说明 #

componentDidMount是在组件挂载完成、DOM已生成后执行，不存在时机问题，纯粹是ID写法错误导致选择器不匹配。

内容的提问来源于stack exchange，提问作者MsA