【问题标题】：Convert JSX to JSON or String and then back again将 JSX 转换为 JSON 或字符串，然后再返回
【发布时间】：2017-06-16 06:30:18
【问题描述】：

我想将 React 组件的状态保存在数据库中。

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 组件？

【问题讨论】：

为什么不保存状态对象本身而不是整个组件？

标签： javascript reactjs

【解决方案1】：

我正在玩这样的东西，我想在数据库中存储一个反应组件的表示并将其渲染回来。经过一番研究，我想出了一种将组件存储为 JSON blob 并将其呈现回 UI 的方法。

检查一下。 https://gist.github.com/praveensastry/132eacff4a684a48e73cae21f2451078

【讨论】：

感谢您的回复。如果我在 Stackoverflow 上享有盛誉，我会投票赞成。
这是一个不错的解决方案，但我想知道如何让事件道具像onClick={()=>{alert('hello')}} 一样工作？

【解决方案2】：

这是一个老问题，但由于我是在自己的搜索中偶然发现的，因此可能是其他人的情况。

如果您想将 JSX 存储在 JSON 中而不将其转换为静态标记或字符串或使用其他外部库，您可以使用普通的 react/react api 来实现。

在我的用例中，我既需要创建新对象，又需要从存储/DB 中检索现有对象，因此我正在循环一个对象，并且所述对象的键之一是组件/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 文档的时间。

【讨论】：

【解决方案3】：

感谢您的回复。

我已通过将其转换为 html 字符串然后使用 html-to-react 包将它们转换回来来解决此问题。

ReactDOMServer.renderToStaticMarkup(entry);
//save to database as a html string.

然后使用它来转换 html 字符串以做出反应。 https://github.com/mikenikles/html-to-react

【讨论】：

【解决方案4】：

在我的场景中，我选择了

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

【讨论】：

【解决方案5】：

有一个库 https://www.npmjs.com/package/react-serialize 可以用来将 JSX 转换为 json，反之亦然。

步骤#1

npm i react-serialize

步骤#2

import { serialize, deserialize } from "react-serialize"

// To serialize
serialize(
  <div>
    <h1 align="center">
      <blink>Hello</blink>
    </h1>
  </div>

// To deserialize
deserialize({
  type: "div",
  props: {
    children: {
      type: "h1",
      props: {
        align: "center",
        children: { type: "blink", props: { children: "Hello" } }
      }
    }
  }
})
)

【讨论】：