我找到了一个我想在我的项目中使用的库,但这是一个普通的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
。 最佳答案
看起来该库从函数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/