将JSX转换为JSON或字符串，然后再转回去

Question

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

- Wyatt Benno

---

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

Answer 1

我曾尝试过将React组件的表现形式存储在数据库中并还原渲染。经过一番研究，我找到了一种将组件存储为JSON blob并还原为UI的方法。

看看这个：https://gist.github.com/praveensastry/132eacff4a684a48e73cae21f2451078

- Praveen Sastry

---

谢谢回复。如果我在Stackoverflow上有足够的声望，我会点赞的。 - Wyatt Benno

这是一个不错的解决方案，但我想知道如何让事件属性像 onClick={()=>{alert('hello')}} 一样工作？ - Ponleu

Answer 2

这是一个老问题，但由于我在自己的搜索中偶然发现了它，可能会有其他人遇到相同的情况。

如果你想将JSX存储在JSON中而不需要将其转换为静态标记或字符串，也不使用其他外部库，你可以使用纯React/React API实现。

在我的用例中，我需要创建新对象并从存储/数据库中检索现有对象，因此我正在遍历一个对象，其中一个键是组件/JSX。

示例：

const experiment = <img src={sampleImagePath}></img>;
const example = { object: experiment }

然后，在代码的某处，我们有一个函数返回存储在JSON中的任何JSX对象。 在我的情况下，遍历了一个对象并返回其中存储的元素。

return (
  <div>
    {React.createElement(object.type, object.props)}
  </div>);

重点是React.createElement，如有需要，您可以在文档中了解更多信息：https://reactjs.org/docs/react-api.html#createelement

虽然它可能没有涵盖所有用例，但它可能是一个很好的起点。 我知道如果有这个答案，它会为我节省几分钟在 SO 和 React 文档中搜索。

- PitBoss

Answer 3

有一个库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" } }
      }
    }
  }
})
)

- Maqsood Ahmed

Answer 4

感谢您的回复。

我已经通过将其转换为HTML字符串，然后使用html-to-react包将其转换回来来解决了这个问题。

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

然后使用这个工具将HTML字符串转换为React。 https://github.com/mikenikles/html-to-react

- Wyatt Benno

Answer 5

在我的情况下，我选择了

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

- Jacksonkr