Node.js：Reactコンポーネントをシリアライズ/逆シリアル化する方法は？

Question

React要素（React要素が与えられた小道具のインスタンス）をシリアル化し、別の場所でデシリアライズしたいと考えています。なぜ聞くの？ 1つのプロセスからstdoutにクラスを送信し、別のプロセスでそれをレンダリングできるようにしたいと思います。

• は、文字列としてそれをシリアル化し、それを
• をデシリアライズするeval()を使用して：私はまた
  は、私が試したどのような...単にReactDOM.renderToString()を使用することは十分ではありませんので、レンダリングされたコンポーネントは、インタラクティブになりたいです
  ：それぞれ独自の代用とJSON.stringify()ためのリバイバー機能やJSON.parse()

MyReactComponent.toString()リターンを使用します

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

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

render()またはconstructor()のように、コンポーネント固有のメソッドは含まれていません。

はJSごみ箱にこのコード例を参照してください： http://jsbin.com/febuzupicu/edit?js,console,output

Answer 1

は自分の質問に答えるために：

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

Answer 2

私は何も見つかっていない、周りに広範囲に見てきました。

私は現在、反応成分を引数の配列に変換して再帰的にReact.createElement()に渡す独自の水和物/脱水物を書いています。私はそれが確実にそれを行う唯一の方法だと思います。私はおそらくそれのための小さな図書館を作るでしょう。

理論的には、おそらく1はReact.renderToString()使用することができ、文字列の周囲を通過しますか？しかし、その後、あなたが... dangerouslySetInnerHtmlを使用しているはずだ：

\別の更新を：

ここライブラリです：https://github.com/finetype/react-serialize

それは制限があり、そしてそれは私が今までに書いたきれいなコードではありませんそれはまともなテストカバレッジを持っています。私が予想していたよりも書くのはかなり難しかったし、最終的には何か一貫性を持たせるために、何か大変望ましい機能を犠牲にした。うまくいけばそれらは時間をかけて改良され、プルの要求は大歓迎です。

しかし、それは動作します。 :)

編集：私は十分なテストカバレッジを追加しなかったので、私はレポに追加しなかったコードに実際にたくさんの機能を追加しました。唯一のかなり単純なユースケースのために使用され、私たちのユースケースは、それがコードに追加認知的負荷の価値があることがあまりにも多くなったという十分な複雑さを導入することをしなければならない問題のウサギの穴。私は誰かがこのルートを下るのを忘れてしまいます。