は、 "props"リテラルの代わりにReactJSコンポーネントに "class" "instances"を渡します

Question

propsオブジェクトがReact.createElementで提供される場合、createElementメソッドはそのオブジェクトの列挙可能なプロパティのみをチェックします少なくとも）。

したがって、ECMAScript-6クラスを使ってその状態を変更する方法（カプセル化、右？）をモデル化したReactJS状態の場合は、createElementの呼び出しでその状態をReactJSコンポーネントに渡すことはできません。 ReactJSはメソッドを表示しません。だから私はこのようなことをしなければならない：

const MyApp = React.createClass({ 
     propTypes: { 
      methodA: React.PropTypes.func.isRequired, 
      methodB: React.PropTypes.func.isRequired 
     }, 
...}); 

class MyAppState { 
... 
} 

let appState = new MyAppState(); 
ReactDOM.render(
    React.createElement(MyApp, Object.assign(
     { 
      methodA: s.methodA.bind(s), 
      methodB: s.methodB.bind(s) 
     }, appState)) 
    , document.getElementById('somePlace') 
) 

...どのような種類のビート。私はJavascriptの "クラス"の大ファンではありませんが、クラスがReactJS要素のためにpropsを提供するためにその方法で使用される方法はありますか？クラス "フィールド"は列挙可能なので、問題はありません。これは私がこのように渡すことができないメソッド/アクションです。

Answer 1

問題は、メソッドがクラスインスタンスで定義されていないということです。は、コンストラクタのプロトタイプで定義されています。

Reactがクラスインスタンスを反復するとき、プロトタイプのメンバーを反復処理しません。

アプリケーションの状態を通常のオブジェクトとしてモデル化する方が簡単です。このアプローチを使用すると、アプリケーションをより予測可能にすることができます。

オブジェクトを使用すると、JSONとして保存および読み取りするための状態をシリアル化することもできます（クラスをシリアル化する方法はありません）。

状態を複数インスタンス化する必要があるためにクラスを使用している場合は、代わりにファクトリ関数を使用できます。あなたが直接、いくつかの方法で、あなたの状態を操作したいので、あなたがクラスを使用している場合

function makeAppState(foo, bar, baz) { 
    return { 
    qux: foo + bar - baz 
    }; 
} 

、その後、あなたはまた、ファクトリ関数とプロトタイプでこれを達成することができます。少なくとも、このような場合には、それがupdate方法がmakeAppStateから返されたオブジェクト上に存在しないことをより明確に私に

function makeAppState(foo, bar, baz) { 
    var state = Object.create(AppStatePrototype); 
    state.qux = foo + bar - baz; 
    return state; 
} 

var AppStatePrototype = { 
    update() { 
    this.qux = 0; 
    } 
}; 

をです。

メソッドとプロパティを一緒に渡す場合は、オブジェクトリテラルとその両方を返します。

function makeAppState(foo, bar, baz) { 
    return { 
    qux: foo + bar - baz, 
    update() { 
     this.qux = 0; 
    } 
    }; 
}