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

Question

我想序列化一个React元素(给定props的React组件的一个实例)并在其他地方反序列化它.你为什么问？我希望能够通过stdout从一个进程发送类,并在另一个进程中呈现它.我还希望渲染的组件是交互式的,所以简单地使用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

Answer 1

看看react-serialize。该包允许您将 React 组件序列化为 JSON 字符串并返回。

Answer 2

回答我自己的问题：

// 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)