問題タブ [reactjs]

AngularJS で ReactJS を使用しようとしていますが、うまくいきません。それらを一緒にゲル化する方法を教えてください。または、ここで何が欠けているかを指摘してください。

私の index.html は次のとおりです。

私の reactExample.js の書き方は次のとおりです。

私の angularExample.js は次のとおりです。

何も表示されません (アラート以外)。そこに「Hello」が表示されることを期待していますが、コンソールに次のエラーがスローされます。

どんな助けでも大歓迎です。

React.jsを使用したサーバー側レンダリングで概念的に何かが欠けていると思います

サーバー側の DB からアイテムを表示するページを作成し、それらをフィルタリングするための入力フィールドを使用するとします。

ページが欲しい:

• のような URL に応答します。/items?name=foobar
• React入力フィールドを使用してアイテムを名前でフィルタリングします
• React コンポーネントを使用して、フィルター処理された項目のリストを表示します

クライアント側でアイテムをクエリするパブリック REST API があるとします。

GET /items?name=foobar概念的には、最初のリクエスト ( )でやりたいことは次のとおりです。

• ユーザーがパラメーターとして渡したものを入力フィールドに表示したいので、クエリパラメーター (「foobar」) を「prop」(のようなinitialName)として反応コンポーネントに渡す必要があります。

だから私はこれを試しました：

• また、アイテムのリストを取得するためにサーバーでデータベース クエリを実行し、このアイテムのリストを ItemList の「小道具」として渡す必要があります (「initialItems」など)。

私が理解しているように、リストを表示して「小道具」として受け取る単純なコンポーネントが必要です。

• ここで、 Page 全体を表示するコンポーネントが必要です。このコンポーネントは、ページ全体の状態を維持する必要があります。つまり、フィールドに入力された名前を確認し、API クエリを作成してリスト アイテムを更新する必要があります。ただし、このコンポーネントがサーバー側とクライアント側での後でレンダリングの両方で機能する「initialState」を持つ方法がわかりません。

私はこれを試しました：

それが私が立ち往生しているところです。次のようなものを使用して、サーバー側で物事をレンダリングできます。

しかし、クライアント側の JavaScript を書き込もうとすると、どうすればよいでしょうか? dom をレンダリングする場所はわかっていますが、react コンポーネントに渡す必要がある最初の小道具は何ですか?

私が試したほとんどの試みは、クライアント側でDOMが「消去」され、次のメッセージが表示されます。

React はコンテナーで再利用マークアップを使用しようとしましたが、チェックサムが無効でした。これは通常、サーバー レンダリングを使用していて、サーバー上で生成されたマークアップがクライアントが予期していたものではないことを意味します。React は新しいマークアップを挿入してどちらが機能するかを補いましたが、サーバー レンダリングの多くの利点が失われました。代わりに、生成されるマークアップがクライアントまたはサーバーで異なる理由を調べてください。

私の ItemList コンポーネントのマークアップだけが消去されていることに注意してください。これは私のコンポーネントの実装の問題だと思いますが、どこから始めればよいかわかりません。

私は正しい軌道に乗っていますか？または、何かを完全に見逃していますか？

メニュー項目をイベント ハンドラーに接続するのに問題があります。これは、時間の経過に伴う状態の変化を示す UI のモックです。これは (Bootstrap 経由の) ドロップダウン メニューであり、現在の選択を示すルート メニュー項目があります。

最終的な目標は、ユーザーの選択に基づいてページ コンテンツを非同期的に変更することです。Bob をクリックすると がトリガーされるはずhandleClickですが、そうではありません。

補足として、私は componentDidMount が を呼び出す方法にあまり満足していませんthis.handleClick();が、サーバーから初期メニュー コンテンツを取得する方法としては今のところ機能します。

私は、javascript スコープについてのぼんやりした理解が原因であることをほぼ確信していますが、これまでに試したことはすべて失敗しました (小道具を介してハンドラーを渡そうとすることを含む)。

これにアプローチする正しい方法は何ですか?

もちろん、別々の handleChange 関数を作成してそれぞれの異なる入力を処理することもできますが、それはあまり良い方法ではありません。同様に、個々の入力用にコンポーネントを作成することもできますが、このようにする方法があるかどうかを確認したかったのです。

React (および cljs の場合は Om) は非常に魅力的に見えますが、同じページ/アプリで React コードと一緒に jQuery や jQueryUI コンポーネントなどの非 React コンポーネントを使用することはおそらく不可能だと思います。

誰でも確認できますか？

次のコードを AngularJS から React に移植しています。

私は試した：

で失敗しましParse Error: Line X: Unexpected token }た。

私が思いついた最高のものは次のとおりです。

量が多く" + this.state.XXX + "てとても読みにくいです。

それを行うより良い方法はありますか？

render メソッドが指示しているときに、適用されReactTransitionGroupたばかりの要素が後で.superfade-leave-active適用されないという問題があります。.superfade-enter

http://jsfiddle.net/joecritch/6bpJD/3/

ロジックは、表示されるメッセージがReactTransitionGroupリストの最初の項目であり、私のUserSearchResultsコンポーネントが 2 番目の項目です。後者は、データがロードされたときにのみ表示されます。(データは上部で配列としてモックされ、500 ミリ秒の遅延で読み込まれます。)

望ましい結果:リストにテキストがある場合は常に最初の要素が表示されます。秒は、データがロードされるたびに常に表示されます

実際の結果:最初の要素は期待どおりに機能します。2 番目は最初に表示されますが、500 ミリ秒後にテキストが変更されると、アニメーションが消えます。

注: animate コンポーネントを削除すると、期待どおりに機能します。

別のコンポーネントを介してレンダリングされたボタンを取得して、別のコンポーネントの状態を参照および/または影響しようとしています。

入力の add 関数にアクセスできる新しいコンポーネントを作成したいと考えています。次のように直接参照しようとしましたInputs.add：

しかし、それはうまくいきませんでした。別のコンポーネントを介してコンポーネントの機能にアクセスしたり、別のコンポーネントを介してコンポーネントの状態に影響を与えたりするにはどうすればよいですか? ありがとう。