我找到了一个我想在我的项目中使用的库,但这是一个普通的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 Renderedobject

最佳答案

看起来该库从函数HTMLDOMElement返回formatter.render()

因此,您不能使用JSX语法来呈现它。

虽然我同意其他答案也可以使用,但我更喜欢使用dom ref并在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'));


Working Demo您可以向下钻取对象。

在另一种利用危险地设置内部HTML或仅呈现字符串内容的方法中,您可能会丢失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'));


Working Link您无法向下钻取该对象。

关于javascript - 如何在React中从非React库中渲染div对象?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58654465/

10-12 12:21
查看更多