問題タブ [react-jsx]

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

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

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

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

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

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

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

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

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

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

--

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

イベント プロパティSyntheticKeyboardEvent以外を登録するための React ハンドラを取得できません。null

コンポーネントをフィドルで分離し、アプリケーションと同じ結果を得ています。誰かが私が間違っていることを見ることができますか?

http://jsfiddle.net/kb3gN/1405/

コンパイルされないこの例を考えてみましょう:

ただし、これらの組み合わせはどれも機能します。

複数のコンポーネントを常に div タグで囲む必要があるかどうかを知りたい。

モジュールのロードJSXTransformer.jsに使用しているため、開発でもブラウザで使用できません。require.jsを実行するjsx --watch src/ build/と、実際にjsx->jsはディレクトリ内のファイルに対して1回だけ変換が実行されますsrcが、その後、ディレクトリ内のファイルを変更してもsrc、何も起こらず、変換も行われませんjsx->js(jsx --watch変更に気付かなかった場合など)。

バックエンドでマークアップをレンダリングするアプリケーション (Rails に組み込まれている) があり、ReactJS を使用してフロントエンドの追加機能で「拡張」したいと考えています。

コンテンツのレンダリングは次のようになります。

data-この呼び出しは、 react_ujs がキャプチャして React コンポーネントをインスタンス化するいくつかの属性を持つラッパー div を作成します。私が失敗しているのは、(jquery を使用してややクレイジーなトリックを行う方法を除いて) このマウント要素の内容 (つまり、クラス「foo」を持つ内部 div とその内容) を取得する方法を見つけることです。 React コンポーネントを作成して、JSX に含めることができるようにします。

この動作は、AngularJS 用語で「トランスクルード」と呼ばれるものです。

ReactJS でこの動作を実現する方法はありますか? へのポインタをいくつか受け取りましたthis.props.childrenが、これでは必要な結果が得られないようでundefined、マウント要素にコンテンツが含まれている場合でもそうなるでしょう。

そうです、おそらくここで明らかなことを見逃していますが、「Uncaught TypeError: undefined is not a function」が表示されます.map() のようですが、それが問題なのですが、理由がわかりません。

var ideas = this.state.data に変更すると、エラーは発生しません。JSON データは正しくフォーマットされています。何が問題なのですか?