Javascript 如何在React中处理第三方dom操作？ class CodeBox extends React.Component { componentDidMount() { this.highlight(); } componentDidUpdate() { this.highlight(); } highlight() { this.elem.innerHTML = ""; let c = document.createElement("code"); c.innerHTML = this.props.code; this.elem.appendChild(c); hljs.highlightBlock(c); } render() { return ( <pre ref={(elem) => { this.elem = elem }}></pre> ); } }

我是新手，不知道如何正确处理以下情况：

class CodeBox extends React.Component {
    componentDidMount() {
        this.highlight();
    }
    componentDidUpdate() {
        this.highlight();
    }
    highlight() {
        this.elem.innerHTML = "";
        let c = document.createElement("code");
        c.innerHTML = this.props.code;
        this.elem.appendChild(c);
        hljs.highlightBlock(c);
    }
    render() {
        return (
            <pre ref={(elem) => { this.elem = elem }}></pre>
        );
    }
}

我制作了一个呈现代码的组件，并使用Highlight.js突出显示语法。

class CodeBox extends React.Component {
    componentDidMount() {
        this.highlight();
    }
    componentDidUpdate() {
        this.highlight();
    }
    highlight() {
        this.elem.innerHTML = "";
        let c = document.createElement("code");
        c.innerHTML = this.props.code;
        this.elem.appendChild(c);
        hljs.highlightBlock(c);
    }
    render() {
        return (
            <pre ref={(elem) => { this.elem = elem }}></pre>
        );
    }
}

它工作了，但在内容更新时坏了

class CodeBox extends React.Component {
    componentDidMount() {
        this.highlight();
    }
    componentDidUpdate() {
        this.highlight();
    }
    highlight() {
        hljs.highlightBlock(this.elem);
    }
    render() {
        return (
            <pre><code ref={(elem) => { this.elem = elem }}>{this.props.code}</code></pre>
        );
    }
}

class CodeBox extends React.Component {
    componentDidMount() {
        this.highlight();
    }
    componentDidUpdate() {
        this.highlight();
    }
    highlight() {
        this.elem.innerHTML = "";
        let c = document.createElement("code");
        c.innerHTML = this.props.code;
        this.elem.appendChild(c);
        hljs.highlightBlock(c);
    }
    render() {
        return (
            <pre ref={(elem) => { this.elem = elem }}></pre>
        );
    }
}

); } } 这是可行的，但现在我觉得我使用的React是错误的。

class CodeBox extends React.Component {
    componentDidMount() {
        this.highlight();
    }
    componentDidUpdate() {
        this.highlight();
    }
    highlight() {
        this.elem.innerHTML = "";
        let c = document.createElement("code");
        c.innerHTML = this.props.code;
        this.elem.appendChild(c);
        hljs.highlightBlock(c);
    }
    render() {
        return (
            <pre ref={(elem) => { this.elem = elem }}></pre>
        );
    }
}

---

有没有一种不直接操作dom的方法呢？

您可以使用

危险的SetinenerHTML

来实现相同的结果，而无需使用refs或在渲染后更改dom，但是由于

Highlight.js

的工作方式，您仍然必须使用伪HTML元素

class CodeBox extends React.Component {
    componentDidMount() {
        this.highlight();
    }
    componentDidUpdate() {
        this.highlight();
    }
    highlight() {
        this.elem.innerHTML = "";
        let c = document.createElement("code");
        c.innerHTML = this.props.code;
        this.elem.appendChild(c);
        hljs.highlightBlock(c);
    }
    render() {
        return (
            <pre ref={(elem) => { this.elem = elem }}></pre>
        );
    }
}

为此，我们可以使用

componentWillMount

和

componentWillReceiveProps

方法来代替

componentdiddupdate

和

componentWillReceiveProps

方法：

class CodeBox extends React.Component {
    componentDidMount() {
        this.highlight();
    }
    componentDidUpdate() {
        this.highlight();
    }
    highlight() {
        this.elem.innerHTML = "";
        let c = document.createElement("code");
        c.innerHTML = this.props.code;
        this.elem.appendChild(c);
        hljs.highlightBlock(c);
    }
    render() {
        return (
            <pre ref={(elem) => { this.elem = elem }}></pre>
        );
    }
}

return (
   <pre><code dangerouslySetInnerHTML={this.state.code} /></pre>
);

然后我们在render方法中渲染出新的已格式化代码：

class CodeBox extends React.Component {
    componentDidMount() {
        this.highlight();
    }
    componentDidUpdate() {
        this.highlight();
    }
    highlight() {
        this.elem.innerHTML = "";
        let c = document.createElement("code");
        c.innerHTML = this.props.code;
        this.elem.appendChild(c);
        hljs.highlightBlock(c);
    }
    render() {
        return (
            <pre ref={(elem) => { this.elem = elem }}></pre>
        );
    }
}

返回(
class CodeBox extends React.Component {
    componentDidMount() {
        this.highlight();
    }
    componentDidUpdate() {
        this.highlight();
    }
    highlight() {
        this.elem.innerHTML = "";
        let c = document.createElement("code");
        c.innerHTML = this.props.code;
        this.elem.appendChild(c);
        hljs.highlightBlock(c);
    }
    render() {
        return (
            <pre ref={(elem) => { this.elem = elem }}></pre>
        );
    }
}


class CodeBox extends React.Component {
    componentDidMount() {
        this.highlight();
    }
    componentDidUpdate() {
        this.highlight();
    }
    highlight() {
        this.elem.innerHTML = "";
        let c = document.createElement("code");
        c.innerHTML = this.props.code;
        this.elem.appendChild(c);
        hljs.highlightBlock(c);
    }
    render() {
        return (
            <pre ref={(elem) => { this.elem = elem }}></pre>
        );
    }
}

);

这是一个

---

这仍然不理想，但它没有违反React原则，同时仍然使用Highlight.js，它依赖于额外的DOM操作。

谢谢，这正是我想要的！

class CodeBox extends React.Component {
    componentDidMount() {
        this.highlight();
    }
    componentDidUpdate() {
        this.highlight();
    }
    highlight() {
        this.elem.innerHTML = "";
        let c = document.createElement("code");
        c.innerHTML = this.props.code;
        this.elem.appendChild(c);
        hljs.highlightBlock(c);
    }
    render() {
        return (
            <pre ref={(elem) => { this.elem = elem }}></pre>
        );
    }
}