你如何在 React 中渲染来自非 React 库的 div 对象？

Question

我找到了一个我想在我的项目中使用的库，但它是一个普通的 JavaScript 库并且对 React 一无所知。https://www.npmjs.com/package/json-formatter-js可以在我的 React 项目中使用它吗？我试过这个，但渲染崩溃了。class JSONView extends Component {    constructor(props) {        super(props);    }    render() {        const formatter = new JSONFormatter(this.props.data);        const Rendered = formatter.render();        return (            <div>                <Rendered />            </div>        );    }}我得到的错误是这个。Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.该typeof Rendered是object。

Answer 1

试试这个

class JSONView extends React.Component<any, any> {

    constructor(props) {

        super(props);

    }

    public refs:{

        JsonDiv: HTMLDivElement;

    };

    componentDidMount(){

        const formatter = new JSONFormatter(this.props.data);

        this.refs.JsonDiv.appendChild(formatter.render());

    }

    render() {

        return (

            <div ref='JsonDiv'>

            </div>

        );

    }

}

或者这个

class JSONView extends React.Component<any, any> {

    constructor(props) {

        super(props);

    }

    render() {

        const formatter = new JSONFormatter(this.props.data);

        return (

            <div dangerouslySetInnerHTML={formatter.render()}>

            </div>

        );

    }

}

Answer 2

看起来库HTMLDOMElement从 function返回formatter.render()。

所以你不能使用 JSX 语法来渲染它。

虽然我同意其他答案可以工作，我宁愿使用DOMref和附加返回HTMLDOMElement从formatter.render()在componentDidMount生命周期的方法。

import React, { Component } from 'react';

import { render } from 'react-dom';

import JSONFormatter from "json-formatter-js";

import Hello from './Hello';

import './style.css';

class JSONView extends Component {

    constructor(props) {

        super(props);

    }

    ref = null;

    componentDidMount(){

      const formatter = new JSONFormatter(this.props.data);

      const Rendered = formatter.render();

      this.ref.appendChild(Rendered);

    }

    render() {     

        return (

            <div ref={e => this.ref = e}>

            </div>

        );

    }

}

render(<JSONView data={{Hello: {Hello:  "World"}}} />, document.getElementById('root'));

工作演示您可以深入到对象。

在使用危险的SetInnerHTML或仅呈现字符串内容的另一种方法中，您有丢失DOM 事件的风险。

import React, { Component } from 'react';

import { render } from 'react-dom';

import JSONFormatter from "json-formatter-js";

import Hello from './Hello';

class JSONView extends Component {

    constructor(props) {

        super(props);

    }

    ref = null;

    render() {     

        const formatter = new JSONFormatter(this.props.data);

          console.log(formatter);

          const Rendered = formatter.render();

          console.log(Rendered.innerHTML);

          return (

            <div>

                <div dangerouslySetInnerHTML={{__html:Rendered.innerHTML}} />

            </div>

          );

    }

}

render(<JSONView data={{Hello: {Hello:  "World"}}} />, document.getElementById('root'));

工作链接您不能向下钻取到对象。

Answer 3

编辑

尝试

{ Rendered }

如果它附带带有 html 标签的类，可能会有警告。

在花括号 {} 之间，它会起作用（99%），如果没有，则继续阅读。

如果它返回字符串，您可以渲染。

目前它可能会返回与 react dom 渲染不兼容的 html 对象。

如果它包含类属性，那么即使它是字符串格式也会导致问题。

您可以使用react-html-parser在 react 中渲染 html 字符串。参考

const Rendered = formatter.render().outerHTML   // this will give you html string instead of html object

现在使用react-html-parser如果你不想管理类属性名称冲突，因为 react 接受 className

import ReactHtmlParser from 'react-html-parser';

class JSONView extends Component {

    constructor(props) {

        super(props);

    }

    render() {

        const formatter = new JSONFormatter(this.props.data);

        const Rendered = formatter.render().outerHTML;

        return (

            <div>

               { ReactHtmlParser(Rendered) }

            </div>

        );

    }

}