問題タブ [reactjs]

propsReact/JSX で同じ値に複数回アクセスする場合、オブジェクトをローカル変数にキャッシュすることをお勧めしますか?

リセットしたい概念的にステートフルな反応コンポーネントが時々あります。理想的な動作は、古いコンポーネントを削除し、新しい元のコンポーネントを再読み込みすることと同じです。

React はsetState、コンポーネント自体の明示的な状態を設定できるメソッドを提供しますが、ブラウザーのフォーカスやフォームの状態などの暗黙的な状態を除外し、その子の状態も除外します。その間接的な状態をすべて把握するのは難しい作業になる可能性があります。新しい驚くべき状態ごとにモグラたたきをするよりも、厳密かつ完全に解決することをお勧めします。

これを行うための API またはパターンはありますか?

編集:this.replaceState(this.getInitialState())アプローチを示し、アプローチと対比 する簡単な例を作成しましたthis.setState(this.getInitialState()): jsfiddle -replaceStateより堅牢です。

アプリケーションの小さな部分を「コンポーネント化」したい場合には、react が適していることがわかりますが、完全なコンポーネント アプリケーション、たとえば SPA を作成することについてはわかりません。

私の例では、他のコンポーネントでもある「ビュー」のメニューとコンテンツの場所を含む単一のページがあります。

それを解決するために私が見つけた方法は、メニューコンポーネントを構築し、そのrenderメソッドでどのオプションが選択されているかを確認し、これをこのコンテンツの場所に表示することです.renderメソッド内のスイッチケースにすぎません(においはしますが、簡単に修正できます)

その時点から、すべてがコンポーネントであり、その子コンポーネントなどがあると想像します。このアプローチが良い方法であるかどうか、パフォーマンスや保守性などの欠点があるかどうかを知りたいです (単体テストの方がはるかに簡単であることがわかりました)。

React を使い始めたばかりで、React コンポーネントを使用して既存の HTML 出力を再作成しようとしています。

これがバグなのか、何か間違ったことをしているのかはわかりませんが、最終的な HTML 出力は期待したものではありません。

問題は、タブ アンカー テキストをスパンでラップするべきではなく、次の番号のみでラップする必要があることです。

このJSXから始めます：

次の JS にコンパイルされます。

これは、次の HTML としてレンダリングされます。

javascript はスパンをアンカーの子として明確に示しているので、おそらくバグだと思いますが、何か間違ったことをしていないことを確認したかったのです。

子のない React コンポーネントでは、JSX 条件内で配列を使用しているため、「unique key prop」エラーが発生します。

配列内の各子には、一意の「キー」小道具が必要です。

エラーをトリガーしているコードは次のようになります。

子コンポーネントをレンダリングするときにkey prop が必要な理由は理解していますが、「配列内の子」がこのような子要素の任意のセットである場合、React/JSX を満たすにはどうすればよいですか?

Angular で React js を使用してアイテムを反復処理し、Angular の方法で速度/組織の問題が発生しているため、必要なテンプレートを作成することを試しています。アイテムの配列を繰り返し処理し、アイテムごとに新しい子スコープを作成し、そのデータを使用して反応でマークアップを構築しています。私の質問は、新しく追加された子スコープを既存のコントローラーにアタッチして、コントローラーが持つメソッド/変数を接続する方法はありますか?

親スコープにアクセスして子を作成する React マークアップを次に示します。たとえば、サンプル コントローラー名「CtrlItem」をバインドしたいと思います。このようなことは可能ですか？

更新
これは、私が回避しようとしている角度の混乱です。angularはディレクティブのインスタンス化時に動的テンプレートをロードできないため、基本的にng-includeを介して追加のテンプレートをロードしています。ng-include または ng-switch よりもテンプレートをコンパイルするためのより良い方法があるに違いないと感じています

私がやろうとしているのは、soundcloud-template.html を完全にロードする必要をなくすことです。

私は反応するのが初めてで、反応アニメーションを試しました。これらは、TransitionGroup で要素が追加または削除されたときにうまく機能します。しかし、単一の要素を同様の要素に置き換えると、react はその要素のコンテンツが変更されたことを検出し、アニメーションをトリガーしません。

1 つの要素をフェードアウトさせ、同じ場所で新しい要素をフェードインするにはどうすればよいですか? たとえば、login-div をフェードアウトし、dashboard-div をフェードインします。

http://jsfiddle.net/NV/f54Xr/

入力フィールドの数値を変更すると、React がスローします。

キャッチされないエラー: 不変違反: マージ関数に関する重要な仮定に違反しています。これは、必ずしも呼び出し元ではなく、マージ関数自体の障害です。

Reactのバグですか？配列のマージが機能していませんか?

はい、react-art があることは知っていますが、壊れているようです。

問題は、d3.js はすべてブラウザー DOM の変更に関するものであり、ブラウザー DOM へのすべての変更が React の仮想 DOM に反映されないため、それを直接 (たとえば componentDidMount メソッド内で) 使用すると正しく機能しないことです。何か案は？

React JSX ファイルを次のようにプリコンパイルしようとしています。

サブディレクトリに縮小されていないreact.jsファイル (0.9.0) がありdev/js/libます。コンパイルすると、React ソースは になりpublic/AutoFocusMixin.jsます。名前が変更されるとともに、ソースは親ディレクトリに「移動」されます。

これは、縮小されていないバージョンの Reactを使用した場合にのみ発生します。コンパイルされたファイルは縮小されません。デバッグには縮小されていないソースを使用しています。

バージョン 0.8.0 でも同様の問題がありましたが、 という名前ではなくAutoFocusMixin、結果のファイルに名前が付けられ$.js、親ディレクトリにもありました。

私の解決策は、縮小されていないソースを正しい場所に手動でコピーすることでした。

誰かがこれに対するより良い解決策を思いついたのですか、それとも私が間違っているのかを見ていますか?

--

これは、React ソース (以下) の問題のあるコードであると思います。それが何をするかはわかりますが、その目的は不明です。私が使用しているファイルは、アドオンなしの React コアであることを確認しました。