我想在数据库中保存React Component的状态。
Json.stringify(myComponent);
但是,当我尝试再次使用JSON.parse组件时,我得到了
Error: Objects are not valid as a React child (found: object with keys {type, key, ref, props, _owner, _store})
这是一个JSON数组。我读到这是由JSX密钥引起的。
是否有任何包允许我将JSX保存为字符串或对象,然后再将其作为React组件呈现?
答案 0 :(得分:3)
我正在玩这样的东西,我想在数据库中存储反应组件的表示并将其渲染回来。经过一些研究后,我想出了一种将组件存储为JSON blob并将其渲染回UI的方法。
Ckeck it out。 https://gist.github.com/praveensastry/132eacff4a684a48e73cae21f2451078
答案 1 :(得分:2)
这是一个古老的问题,但是由于我是在自己的搜索中偶然发现的,因此可能是其他人这样做的。
如果要在JSON中存储JSX而不将其转换为静态标记或字符串或使用其他外部库,则可以使用简单的react / react api来实现。
在我的用例中,我既需要创建新对象,又需要从存储/数据库中检索现有对象,所以我要遍历一个对象,而该对象的关键之一就是组件/JSX。
示例:
const experiment = <img src={sampleImagePath}></img>;
const example = { object: experiment }
然后,在代码中的某个地方,我们具有返回对象中所有JSX的函数。 就我而言,循环遍历一个对象并返回已存储在JSON中的元素。
return (
<div>
{React.createElement(object.type, object.props)}
</div>);
关键部分是React.createElement
,如果需要,您可以在文档中详细了解:https://reactjs.org/docs/react-api.html#createelement
它可能不会涵盖所有用例,但可能是一个很好的起点。 我知道将其作为答案将为我节省几分钟的SO和react文档搜索。
答案 2 :(得分:0)
感谢您的回复。
我已经通过将其转换为html字符串然后使用html-react包将它们转换回来解决了这个问题。
ReactDOMServer.renderToStaticMarkup(entry);
//save to database as a html string.
然后使用它来转换html字符串以作出反应。 https://github.com/mikenikles/html-to-react
答案 3 :(得分:0)
在我的情况下,我去了
更直接:
import React from 'react';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
class HtmlComponent extends React.Component {
render() {
const html = '<div>Example HTML string</div>';
return <div>{ ReactHtmlParser(html) }</div>;
}
}