将JSX转换为JSON或String,然后再返回

时间:2017-06-16 06:30:19

标签: javascript reactjs

我想在数据库中保存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组件呈现?

4 个答案:

答案 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)

在我的情况下,我去了

react-html-parser

更直接:

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>;
  }
}