問題タブ [higher-order-components]

HOCラッピングフォーム入力を作成しました

createClass(...)自分の を宣言する部分をどうにかスキップできますInputか? React.DOM.input要素のReactクラスは何ですか? (React 0.13.3 を使用しています)

独自のクラスの代わりに、と のInput両方を渡そうReact.DOM.inputとしましたReact.createFactory('input')。これは機能せず、次の警告メッセージが表示されます。

警告: バインドされた createElement(...):render返されたコンポーネント インスタンスにメソッドが見つかりません: コンポーネントで定義するのを忘れたrender か、タイプが React コンポーネントではない関数である要素を誤ってレンダリングしようとした可能性があります。警告: React 要素の props プロパティを設定しないでください。代わりに、要素を最初に作成するときに正しい値を指定してください。

HOC (具体的には react-graphql )の引数をカスタマイズしようとしています。この特定のライブラリ HOC の動作方法により、HOC が呼び出された後にコンポーネントの状態 (クエリとオプション) に影響を与えることはできません。

Redux のような従来の HOC ファクトリconnect()では、含まれているすべてのロジックがすぐに適用されますが、これは私たちには早すぎます。applyOriginalHOC()代わりに、このコンポーネントから最初のインスタンスが構築されるまで、元の HOC ( ) の適用を延期しています。

少し型破りなアプローチのように思えるので、フィードバックを探しています。

• HOC の初期化順序を変更することによる副作用はありますか? HOC は、他の HOC の存在に依存すべきではないと思います。
• いずれにせよ、静的解析 (IDE など) は HOC では不可能なので、遅延評価によってこれが良くも悪くもなりませんよね?
• HOC はcontext、ネストされたコンポーネント全体に蓄積される React コンポーネントに提供できます - 順序は重要ではありませんよね?
• コンポーネント定義はアンロードされることはなく、ComponentWithLazyHOCコンポーネント (コンポーネント インスタンスではなく) ごとに 1 回だけ作成されます。メモリリークの可能性はありますか?

ExcludeCart<T>基本的にはジェネリック型を定義したいのですTが、特定のキー (私の場合はcart) が削除されています。したがって、たとえば、ExcludeCart<{foo: number, bar: string, cart: number}>になります{foo: number, bar: string}。TypeScriptでこれを行う方法はありますか?

間違ったツリーを吠えている場合に備えて、これを行いたい理由は次のとおりです。既存の JavaScript コードベースを TypeScript に変換しています。これにcartifyは、React コンポーネント クラスを受け取り、Inner別のコンポーネント クラスを返すというデコレータ関数が含まれていますWrapper。

Innercartprops と 0 個以上のその他の propsを取る必要があります。Wrapperはprop (に渡す prop をcartClient生成するために使用される) と、を除く、受け入れるすべての prop を受け入れます。cartInnerInner cart

言い換えれば、 を定義する方法がExcludeCartわかったら、それを使って次のことを行いたいと思います。

高次コンポーネントを介して管理される制御された入力を持つフォームがあります。構造は次のようになります。

フィールド高次成分

分野

これを使用TextFieldするとうまく機能しますが、より柔軟に使用したいのですが、たとえば、onChange場合によっては機能を強化して、常に状態を設定するだけでなく、状態に基づいて他のことを実行できるようにしたいと考えています。が使用されているコンポーネント内のまたは関数TextField。

HOC の仕組みを誤解していますか?

質問

パラメータの順序を定義する API によって呼び出される ES7 関数を作成しています。

使用する必要がありますが、使用ownPropsしませんstate。最初のパラメーターが指定されていないか、読み取りまたは書き込みを試行するとエラー (「フェイル ファスト」) が発生するように関数定義を作成することはできますか?

これは機能しません

これは魅力的に見えますが、もちろん_有効な変数名です...:

もう少しコンテキスト

私の質問は、実際にはSkipping optional function parameters in JavaScriptのミラーです。

私の質問の文脈は、クリックされたときに何かをするボタンを実装するReactコンポーネントのペアを書いているということです。

内側のコンポーネントはボタン テキストを含むレイアウトを指定し、外側のコンポーネントはモーダルを表示し、react-redux のconnect関数を使用して内側のコンポーネントで構成されます。

使用法は次のとおりです。

私がやりたいことは、MyButtonContainer に渡されるプロパティを介して、ボタンに表示されるテキストを構成可能にすることです。

状態を props ( ) にマップするために使用される関数の 2 番目のパラメーターを使用することでownProps、プロパティにアクセスできますがtext、状態からは何も必要ないので、わかりやすくするため、およびバグが発生する可能性を減らすために、mapStateToProps を記述します。最初のパラメーターが使用できないように機能します。

私はES7からトランスパイルしているので、標準のESは問題ありません。提案された拡張機能があれば、それらも使用できるかもしれません (webpack に感謝します)。

あるいは、React でこれを行うためのより良い方法があれば、その解決策も受け入れます。

ボタンのテキストを redux ストアに入れてみませんか?

これは技術的なオプションです。私はいくつかの理由でそれが好きではありません: - ボタン テキストは内部コンポーネントのプロパティです。HOC を使用してラップし、ボタン機能を提供していない場合は、プロパティとして直接指定するだけです。 redux ストアでは、多くのコーディング オーバーヘッドが発生します。レデューサー、ストア イニシャライザー、アクション クリエーターを作成する場合、より適切で簡単な方法が必要です。- 同じレンダリングされたページに複数のボタンをそれぞれ異なるテキストで表示したい - コンテナ クラスでプロパティを指定する必要があるとしても、それを表示するテキストにするのが最もきれいに見える