Node.js：如何序列化/反序列化 React 组件？

IT技术 javascript node.js serialization reactjs deserialization
2021-05-13 09:59:07

我想序列化一个 React 元素（给定 props 的 React 组件实例）并在其他地方反序列化它。你为什么问？我希望能够通过标准输出从一个进程发送类并在另一个进程中呈现它。我也希望渲染的组件是交互式的，所以仅仅使用是ReactDOM.renderToString()不够的......

我试过的：

  • 将其序列化为字符串并eval()用于反序列化
  • 分别为JSON.stringify()和使用自定义替换器和恢复器功能JSON.parse()

MyReactComponent.toString() 返回：

"function MyReactClass() {
    _classCallCheck(this, MyReactClass);

    _get(Object.getPrototypeOf(MyReactClass.prototype), 'constructor', this).apply(this, arguments);
}"

它不包含我的组件独有的任何方法（例如render()或constructor()）。

在 JS Bin 中看到这个示例代码：http : //jsbin.com/febuzupicu/edit? js,console, output

3个回答

看看react-serialize。这个包允许你将 react 组件序列化为 JSON 字符串并返回。

我环顾四周，没有找到任何东西。

我目前正在编写我自己的 hydrate/dehydrate 将react组件转换为参数数组，以递归方式传递给React.createElement(). 我认为这是可靠地做到这一点的唯一方法。我可能会为它制作一个小型图书馆。

从理论上讲，也许可以使用React.renderToString(), 并传递字符串？但是你会使用dangerouslySetInnerHtml...：\

另一个更新：

这是图书馆：https : //github.com/finetype/react-serialize

它有局限性，它不是我写过的最漂亮的代码，但它也有不错的测试覆盖率。编写起来比我预期的要困难得多，最后我牺牲了一些非常想要的功能来获得一致的东西。希望这些会随着时间的推移得到改进，欢迎请求请求。

但它有效。:)

编辑：沿着这条路走下去后（实际上向该代码添加了大量功能，但我没有添加到 repo 中，因为我没有添加足够的测试覆盖率），我们最终决定这是一个问题的兔子洞这应该只用于相当简单的用例，并且我们的用例引入了足够的复杂性，以至于它变得不值得它添加到代码中的认知负载。我会警告某人不要走这条路。

回答我自己的问题：

// If I stringify this
JSON.stringify({
  type: `React.createClass({
    render: function() {
      return <span>{this.props.name}</span>
    }
  })`,
  props: {
    name: 'Jorge'
  }
})

// Then I am able to parse it and deserialize it into a React element
let {type, props} = payload
// In Node
React.createElement(vm.runInNewContext(type, {React}), props)
// Not in Node
React.createElement(eval(type), props)
其它你可能感兴趣的问题
上一篇如何在 react native app 中使用 react js 组件？ 下一篇错误：(19, 35) TS2304：找不到名称“T”。为什么我不能在 TS 中扩展接口？