問題タブ [reactjs]

独自の DOM ツリーの子ではないサブコンポーネントを管理する必要があるが、最上位のドキュメントに追加する必要があるコンポーネントを考えてみましょう。

典型的な例は、入力フィールドの下のフローティング メニューにオートコンプリートの一致を表示する必要があるオートコンプリート フィールドです。フローティング メニューは、表示を妨げる​​ツリー内の "overflow: hidden" 制約を回避するために、必ずドキュメント body 要素の子として追加する必要があります。フローティング メニューは、使用されなくなったら削除する必要があります。

このような場合、論理的なアプローチは、コンポーネントを任意の div にマウントし、後で不要になったときにアンマウントすることです。ただし、イベントを使用してそのようなアンマウントをトリガーすると、興味深い状態フローの問題が発生します。

問題を説明するために、現在のコードからの抜粋を次に示します。

ここでFloaterは、他のコンポーネントを含むことができる汎用コンポーネントです。自分自身を絶対に設定し、自分自身を配置します。Floater.create()floater コンポーネントを作成してドキュメントに挿入する便利なメソッドです。

Floater.remove()現在、次のようになっています。

タイムアウトを使用する理由は、親コンポーネントが状態の更新後にリモートにできるようにするためです。で何かを選択すると、親でSelectableList がトリガーされ、コンポーネントがまだ使用されている間にコンポーネントをアンマウントするために呼び出されます。それは機能しますが、醜いです。handleSelectionChangeremove()

より良い、より慣用的な方法はありますか?

HTMLをレンダリングせずに、Reactを使用してロジックを実行し、データをJavaScript関数に送り返すことができるかどうか疑問に思っていました。私が考えているコンポーネントは、データを渡すもので、react 外の JavaScript 関数にデータを送り返します。私はそれが可能であることを知っており、その部分を自分で実行しましたが、必要なため、html をレンダリングせずにこれを行う方法がわかりません。これはreactの実用的なユースケースですか？

React JS を使用してメニューを作成します。

ここで、Title と OptionsDropdown は他の React クラスです。問題は、次のように div でラップするまで、このコードにエラーがあることです。

Title と OptionsDropdown の外側に div をラップしない場合、この状況を処理するほうがよい方法はありますか。

たとえば、dialog.js で ReactJS クラスを定義した場合:

上記では、クラスを定義しています..しかし、私が見るすべての例には、React.renderComponent(<Dialog/>,document.getElementById('someId'));

これに関する問題は..このコンポーネントを異なるIDを持つ異なるページで使用して、またはおそらくいくつかの異なるIDでレンダリングしたい場合、実際のクラスでIDをハードコーディングできない. 何らかの方法でIDを渡すことができると思いますか??

しかしさらに、このjsクラスのロード後にロードされた別のJSクラスでコンポーネントをレンダリングできるようにしたいと考えています。最後に読み込まれる SPA アプリ用の app.js クラスがあります。その中で、ユーザーがリンクをクリックしたときに、その時点でこのコンポーネントのみをレンダリングしたい場合があります。render メソッドでは、実際にレンダリングされるかどうかを何らかの方法で制御できることを理解しています..しかし、アクションが発生しない限り、DOM に挿入することさえ気にしないことも考えています。怠惰な挿入のようなものだと思いますか？

私は自分のapp.jsで試しました:

しかし、このJSはJSX JSファイルではないため、明らかにこれは機能しません。そこで React.renderComponent(Dialog,...); を使ってみました。Dialog クラスはグローバルに定義されていると考えているため、利用可能ですが、それも失敗します。

Dialog クラスを別の関数で使用してレンダリングするにはどうすればよいでしょうか。

ドキュメントが言うように、パフォーマンス上の理由から「開発モード」でのみ機能する ReactJS のprop validation featureの使用を開始しました。

React は、私が注釈を付けた特定のコンポーネントのプロパティを検証しているようですが、「開発モード」を明示的にオンにしたことを覚えていません。

開発モードをトリガー/トグルする方法を探してみましたが、うまくいきませんでした。

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

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

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

react-railsRailsプロジェクトでgemを使用しています。javascriptとjsxは一貫して動作しますが、私のファイルcoffeescriptは決して動作しないようです。coffeescript補間されたjsxを使用せずに、純粋なソリューションを使用しようとしていることに注意してください。

私のcoffeescriptファイル (拡張子は*.js.coffee)

私からしてみれば：

そして、これは私がコンソールで一貫して得るエラーです:

ReactとMeteorのどちらの問題なのか、おそらく両方の問題なのかはわかりませんが、現在、これら 2 つのフレームワークを使用して Web アプリを構築しており、プログラマーの問題に直面しています。私は Javascript 開発者ではなく Java 開発者です (GWT を毎日使用しています) ので、初歩的なミスを犯した可能性があります。

私のアプリは成長を続けており、約 20 ほどの React コンポーネントがますます増えています。これで問題のないビューができたので、コンポーネントにいくつかの機能を追加しましたが、MVC の原則に反すると思われる反応コンポーネントにロジックを追加することがわかりました。

ただ、「Meteor controller components」でロジックを動かす方法がわかりません。現在、私はそのモデルに Meteor を使用しています。このPete Hunt の講演と彼がアプリケーションをどのように構築したかを何度も見ましたが、「単純な」コンポーネントが 1 つしかありません。

実際、React がなければ、ビューはテンプレートで定義された html ファイルになります。コントローラーはjsファイルにあり、ロジックはそこにあるように見えます。ビューとコントローラの間の分割がはっきりとわかります。

HTML ファイル (リーダーボードの例から):

Javascript ファイル (リーダーボードの例から):

React は JavaScript であるため、必要なものすべてを React コンポーネントに入れるのは非常に簡単で、魅力的です。

これらのフレームワークは誰にとっても比較的新しいものであることは承知していますが、柔軟で保守可能な Web アプリケーションを作成するために、このような MVC アプリケーションを設計する方法についていくつかの規則が存在するかどうか、従うべきガイドラインはありますか? 私はそれを行うための「最善の」方法を探しているのではなく、いくつかの意見を求めています。

注：ここでは、焦点を当てないように意図的に多くのコードを配置しませんでしたが、必要なもの（コード、スキーマ、リンクなど）で答えを自由に説明してください。

これが私がやっていることの例です。この例では、すべてが反応クラスで行われます。おそらくそれが最善の方法であるかもしれませんが、そうでないかもしれません。あなたの考えが必要です。

要約すると、入力として与えられた配列 ([{name: itemName1, type:itemType1}, {name: itemName2, type:itemType2} ...] のようなもの) から要素のリスト (Boostrap リスト グループ) を作成します。次のようなビュー:

• アイテム名1
• アイテム名2
• ...

各アイテムは、そのタイプに応じて独自のスタイルとして。次に、入力テキスト ボックスを介して、ユーザーはこのリストを検索できます。リストをフィルタリングし、一致する要素で構成された新しいリストを生成します (検索アルゴリズムは正しくなく、変更されます)。さらに、特定のキーボード キーを使用した追加のコマンドがあります。すべてが正常に動作しますが、お気づきのように、すべてが反応クラスにあり、Meteor を React に適合させる方法がわかりません。

流星ファイル:

反応ファイル:

入力値のリロードに問題があります。

その後、私は使用します

デバッガーの値this.props.handlingAgent.emailは実際には asd ですが、入力ではまだ古い値です。JQueryなしでその値をリフレッシュする方法は? 自動更新じゃないの？

私は Facebook の react.js を調べていて、これまでのところ非常に優れていることがわかりました。各フォルダーを開閉できるシンプルなフォルダー構造を作成しようとしました。私の構造は次のようになります

<Folder> <Header/> <Content/> </Folder>

ヘッダーをクリックすると、フォルダーのコンテンツが非表示/表示されます。これは、状態を介して非常に簡単に実行できます。

しかし、今は複数のフォルダーと「すべて切り替え」ボタンが必要です。大きな混乱を招くことなく、すべての子を切り替えるボタンを取得するにはどうすればよいですか? それらに対処するために参照を使用しましたが、ドキュメントに記載されているように、それは悪い習慣だと思います。

...あなたの最初の傾向は、通常、参照を使用してアプリで「物事を実現する」ことです...

...コンポーネント階層のどこに状態を所有するかを考えてください。多くの場合、その状態を「所有」する適切な場所は、階層の上位レベルにあることが明らかになります。

全体を示すためにFiddleを作成しました。それは機能していますが、それはあまり良い解決策ではないと思います。

PS (ボーナスの質問): レンダリングしないだけでコンテンツを非表示にする方が良いですか (フィドルで行われたように)、単に「display : none;」を追加するだけですか? スタイルタグ?