問題タブ [reactjs]

初めて React で遊んでいますが、とても気に入っています。これまでのところ、ボードゲームのGoを(大部分) 実装しましたが、慣用的な React の方法でアプローチする方法がわからないという奇妙なことに遭遇しました。基本的に、モデル (ボード ゲーム) を独自のクラスBoardとして実装しました。play(i,j)コンストラクター、メソッド、およびのみを公開しpassます。すべてのゲーム ロジックを処理し、独自の内部状態を適切に更新します。ビュー/コンポーネントに関連するものへの参照はありません。のインスタンスへの参照を維持するBoardViewという React コンポーネントがありますBoard。というコンポーネントもありますAlertView必要に応じて、ゲームの状態 (不正な動きなど) に関するメッセージを表示します。

Board今ではすべてがうまく機能しており、クラスとそのビューの間の関心の分離が気に入っています。しかし、Boardクラスの変更をビューに伝える方法は珍しく、他の React コードと矛盾しているように感じます。基本的に、私はjQuery のイベント システムを悪用して、のような任意のイベントをトリガーできるようにしています["update", "atari", "suicide"]。このスキームでは、Component には を呼び出す onClick リスナーがありBoard.play、Board インスタンスで 0 から多数のイベントをトリガーします。"update"コンポーネントはイベントをリッスンし、 を呼び出しますthis.setState。これにより強制的に再起動render()され、ゲームを正しく描写する状態にビューが置かれます。は、同じボード インスタンスでとイベントをAlertViewリッスンし、同様に呼び出します"atari""suicide"this.setState、別の をトリガーしますrender()。

jQuery イベントを削除する必要がありますか? もしそうなら、これを行う最善の方法は何ですか?

すべてのコードはここから入手でき、ここでアプリで遊ぶことができます。

編集:後世のために、この質問はコミット3f600cで行われました。

私の質問は2つの部分に分かれています：

1. componentDidMount でサードパーティ API への ajax リクエストを実行する方法は知っていますが、クリック イベントの関数で同じリクエストを実行しようとしたときに、それは起こりませんでしたか?

2. <br>また、反応でタグを使用して改行しようとしましたが、まったくレンダリングされず、エラーが発生します。

なぜこれが起こっているのか、どうすればこれらの問題を解決できるのかを理解するのを手伝ってもらえますか?

私たちのアプリケーションは、無限スクロールを使用して、異種アイテムの大きなリストをナビゲートします。いくつかのしわがあります:

• ユーザーが 10,000 項目のリストを持っていて、3k 以上スクロールする必要があるのはよくあることです。
• これらはリッチ アイテムであるため、ブラウザーのパフォーマンスが許容範囲を超える前に、DOM に数百しか保持できません。
• アイテムの高さはさまざまです。
• アイテムには画像が含まれている場合があり、ユーザーは特定の日付にジャンプできます。これは注意が必要です。なぜなら、ビューポートの上に画像をロードする必要があるリスト内のポイントにユーザーがジャンプできるためです。これにより、ロード時にコンテンツが押し下げられます。これを処理しないと、ユーザーは日付にジャンプする可能性がありますが、その後、以前の日付にシフトされます。

既知の不完全な解決策:

• ( react-infinite-scroll ) - これは単純な「一番下に到達するとさらにロードする」コンポーネントです。DOM をカリングしないため、何千ものアイテムで停止します。

• ( Scroll Position with React ) - 上部に挿入するとき、または下部に挿入するときにスクロール位置を保存および復元する方法を示しますが、両方を同時にではありません。

私は完全な解決策のコードを探しているわけではありません (それは素晴らしいことですが) 代わりに、この状況をモデル化するための「React の方法」を探しています。スクロール位置状態か？リスト内での位置を維持するには、どの州を追跡する必要がありますか? レンダリングされたものの下部または上部近くをスクロールしたときに新しいレンダリングをトリガーするには、どの状態を維持する必要がありますか?

AngularJS で作成されたアプリを入手しましたが、アプリがサーバーから大量のデータを読み込もうとし、ユーザーがそれを操作できる (複雑な DOMを読み取る) ため、パフォーマンスの問題が発生しました。サーフィンして読んでみると、本質的に AngularJS の $watch 式などと呼ばれる双方向のデータ バインディングが、克服できない問題を引き起こしているようです。そして、高速なビュー レンダリングを約束する fb の ReactJS に出会いました。

これにより、ReactJS を AngularJS と共に使用して、「ビュー」部分だけを処理できるかどうか疑問に思いました。誰かがこれに関する洞察や方向性を提供できれば、非常に感謝していますか?

ありがとう

私はReactjsを使い始めたばかりで、
liタグを表示するための単純なコンポーネントを書いていて、このエラーに遭遇しました:

予期しないトークン '<'

http://jsbin.com/UWOquRA/1/edit?html,js,console,outputの下のjsbinに例を置きました

私が間違っていることを教えてください。

Polymer 0.1.1 および React.js 0.8.0。

縮小ケース: http://jsbin.com/usIZuLo/3マウス/ホイール/キー イベントごとに次のようなエラーが発生します。

Polymer の events.js が React の合成イベントと競合しているようです。

エラー スタックはここで終了します (react.js:7794):

おそらく問題は、nativeEvent実際に Polymer でラップされていることです。メモによると// TODO:、これは React の将来のバージョンでは問題にならない可能性があります。

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