无法在React组件中操作DOM

我无法在组件willmount或组件didmount生命周期方法中操作

document.getElementById（“图表”）

在这两种方法中都返回null。我应该不使用原始DOM操纵函数，还是应该使用其他方法来实现相同的操作，即操纵

从“React”导入React
导出默认类D3Chart扩展React.Component{
构造函数（）{
超级（）；
}
组件willmount（）{
document.getElementById（“图表”）.innerText=“测试”；
}
组件安装（）{
document.getElementById（“图表”）.innerText=“测试”；
}
render（）{
返回(
)
};
}

只需使用

ref

就像React guys一样：

从“React”导入React；
从“react dom”导入react dom；
导出默认类D3Chart扩展React.Component{
构造函数（）{
超级（）；
}
组件安装（）{
this.refs.chart.innerText=“测试”；
}
render（）{
返回；
}
}

---

下面是参考号。

参考号是访问节点的方式，类似于HTML中的id

this.refs.myDiv;

<div ref='myDiv' />

---

---

看一下文档：

getElementById

仅对插入文档中的元素有效。@FelixKling:请您再解释一下好吗？您的链接页面没有提到

getElementById

或“插入”一词。非常感谢。

import React from 'react';
import ReactDOM from 'react-dom';

export default class D3Chart extends React.Component {
    constructor () {
        super();
    }

    componentDidMount () {
        this.refs.chart.innerText = "Testing";
    }

    render() {
        return <div id="chart" ref="chart"></div>;
    }
}

this.refs.myDiv;

<div ref='myDiv' />

render () {
    return (
        <div ref={htmlOrComponent => { this.htmlOrComponent = htmlOrComponent }}
    );
}

componentDidMount () {
    // this.htmlOrComponent is either the HTML or null
}