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

Answer 1

只需像React个人recommend使用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。

Answer 2

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

this.refs.myDiv;

<div ref='myDiv' />

，key是React如何区分相似节点。方法cloneElement（用于向实例化的JSX模板添加额外的道具）维护这些引用，因此您不必担心＆＃34;丢失＆＃34;你的对象引用。

还有一个更复杂/不同/下一代的光：

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

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

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

无法操纵React组件中的DOM

2 个答案: