无法在React组件中操作DOM

Question

无论是在componentWillMount还是componentDidMount生命周期方法中，我都无法操作<div id="chart">。

document.getElementById("chart")在这两个方法中都返回null。我应该不使用原始的DOM操作函数吗？还是应该使用其他方法来实现相同的目的，即操作<div id="chart">？

import React from 'react'

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

    componentWillMount() {
         document.getElementById("chart").innerText = "Testing";
    }

    componentDidMount () {
        document.getElementById("chart").innerText = "Testing";
    }

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

- wonderful world

---

请查看文档：https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount。`getElementById`仅适用于已插入文档中的元素。 - Felix Kling

@FelixKling：您能再详细解释一下吗？您提供的链接页面中没有提到“getElementById”或“insert”这个词。谢谢。 - 2540625

Answer 1

只需像React的开发者建议的那样使用ref:

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

这里是Fiddle。

- lyosef

Answer 2

ref是访问节点的方式，类似于HTML中的id

this.refs.myDiv;

<div ref='myDiv' />

而 key 则是 React 用于区分相似节点的方法。cloneElement 方法（用于向实例化的 JSX 模板添加其他属性）会维护这些引用，因此你不必担心“丢失”对象引用。

---

对于更复杂/不同/新一代的情况：

当将 [ref] 附加到像 <div /> 这样的 DOM 组件时，您将获得 DOM 节点；当将 [ref] 附加到像 <TextInput /> 这样的组合组件时，您将获得 React 类实例。在后一种情况下，如果其类定义中公开了任何方法，则可以调用该组件的方法。

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

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

---

- neaumusic