問題タブ [reactjs]

データ構造用のシンプルなグリッドベースのエディターを作成しようとしていますが、React.js で概念的な問題がいくつかあります。彼らのドキュメントはこれに関してあまり役に立たないので、ここの誰かが助けてくれることを願っています.

まず、外部コンポーネントから内部コンポーネントに状態を転送する正しい方法は何ですか? 内部コンポーネントの状態変化を外部コンポーネントに「バブルアップ」させることは可能ですか?

第 2 に、2 つの別個のコンポーネントでデータを共有して、一方の変更を他方に表示することはできますか?

以下は、私がやりたいことの簡単な例です ( JSFiddle バージョン):

companyオブジェクトの配列を含むオブジェクトがありますemployee。employeeリストを編集可能なグリッドにレイアウトしたい。ボタンをクリックすると、結果のcompanyオブジェクトとミューテーション (コンソールへの書き込み) が表示されます。

デモ: jsfiddle

°F の値を 1 ずつ変更すると、摂氏に変換されてから華氏に戻されるため、丸め誤差が発生します。

現在変更されている要素の更新を回避する方法はありますか?

Backbone.js にもまったく同じ問題があります。

JSONとして次の構成があります

反応するrendercomponentでは、コンポーネント名を動的に渡してreact renderすることは可能ですか?

たとえば、この rendercomponent では、ContentFormContent を直接配置する代わりに、json 構成からデータを渡すことができ、ループなどを行うことができます。

SO私はjson構成にページのリストを持ち、特定のナビゲーションの選択に基づいて、jsonファイルからの「タイプ」に基づいてコンポーネントをレンダリングします

私は ReactJS に比較的慣れていないので、「最初のツイートまでの時間」を短縮するためにサーバー側のレンダリングを簡単に実装できることに魅了されました。React の renderComponentToString を使用してサーバー上でマークアップを事前レンダリングする Node-Express-React スタックを実行しています。

コンポーネントを同期的にレンダリングできる場合は問題なく動作しますが、ajax を使用したコンポーネントの実装に関しては苦労しています (ただし、これはコンポーネントの初期化中の非同期操作 (websocket など) に適用されます)。

React Web サイトの例を見てみましょう: http://facebook.github.io/react/tips/initial-ajax.html

renderComponentToString を使用すると componentDidMount がトリガーされないため、サーバーでは機能しません。この単純なケースは、(jQuery の $.get を使用する代わりに) クライアントとサーバーで同じ HTTP リクエスト ラッパーを使用し、コンポーネントをインスタンス化して prop として渡す前にデータをプリフェッチすることで回避できます。

ただし、実際の複雑なアプリでは、非同期の依存関係が非常に複雑になる可能性があり、プリフェッチは React 構造を構築する子孫のアプローチにはあまり適していません。実際に何もマウントせずにサーバー上でレンダリングできる非同期初期化パターンを React に実装するにはどうすればよいですか (つまり、PhantomJS のような DOM エミュレーションはありません。これが renderComponentToString を使用することの要点です)。

http://facebook.github.io/react/index.htmlにアクセスすると、jsx のチュートリアルが見つかりますが、js だけを使用するにはどうすればよいですか?

たとえば、上記のコードはリスナーを使用していますが、プレーンな JavaScript でそれを行うにはどうすればよいですか?

ありがとう

初めて 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 の方法」を探しています。スクロール位置状態か？リスト内での位置を維持するには、どの州を追跡する必要がありますか? レンダリングされたものの下部または上部近くをスクロールしたときに新しいレンダリングをトリガーするには、どの状態を維持する必要がありますか?