問題タブ [reactjs]

次のようなhtmlがあります。

私の todo.js は、http: //facebook.github.io/react/からコンパイルされたバージョンの TODO アプリから最後の行を除いたものです。

私の最後の popup.js は次のとおりです。

しかし、ページには何も表示されません! コンソールに次のエラーが表示されます。

なぜそうなのか本当にわかりません。ウェブサイトの例から再作成しようとしました。問題がある場合は、クロム拡張機能にあります。

CustomEvent親ノードと通信するために、通常の DOM を作成してリッスンしています。

子供の場合:

親で:

これは機能しますが、より良い React 固有の方法はありますか?

ReactJSで以下のように構成されたコンポーネントがある場合

「Children」コンポーネントで this.props を使用して「Root」コンポーネント clickHandler にアクセスできますか、それとも、Children コンポーネントがアクセスできるようにするために、root から Parent、Children に clickHandler を渡す必要がありますか。

私は ReactJS (by facebook) を使用しており、setStateorを呼び出すオプションがありますがsetProps、どちらがより効率的なパフォーマンスなのかわかりません。

(私のコードを額面どおりに受け取らないでください。これは単なる単純化です。私の主な関心事は、setPropsどちらsetStateが速いかを知ることです。)

setProps の場合:

setState の場合:

Reactjsを呼び出すsetProps(または)前にデータをフィルター処理すると高速になりますか?setState

ここで、「p」を「w」に更新したいと思います。これを行うと、より効率的/高速になりますか?

またはこれ：

後者の場合、データ オブジェクト全体を再度入れる必要はありませんが、独自のフィルタリングを行う必要があります。

オブジェクト全体を 1 つだけ変更して再度入れた場合、Reactjs はオブジェクト全体を処理するsetProps/setState必要がありますか?それともオブジェクト全体を処理する必要がありrenderますか?

1時間後に編集：

どちらが速いかについて、満足のいく技術的な答えは得られませんでした。

真相を突き止めるのではなく、簡単な jsPerf テストケースを実行して、どちらが高速かを確認し、技術的な真実ではなく、統計上の真実として単純に受け入れました。

http://jsperf.com/reactjs-setprops-big-or-setprops-small

驚くべきことに、大きなオブジェクトを与えると、無視できるほど速くなります。（もっと遅いと思いました。）入力が小さいか大きいかに関係なく、内部的にReactJSはとにかくオブジェクト全体を処理する必要があると思います。大きなオブジェクト (変更されていない) の処理を​​スキップすることはできないため、大きなオブジェクトを渡さなくても時間の節約にはなりません。

Clojurescript と React (Om 経由) を使用して単一ページの Web アプリケーションを構築したいのですが、そのようなプロジェクトのディレクトリ構造をどのようにレイアウトすればよいのでしょうか? プロジェクトにはバックエンド コードは含まれません。これまでのところ、次のレイアウトを想定していました。

RailsやDjangoなどのフレームワークによって課されるレイアウトに匹敵する、そのようなプロジェクト用の確立された「標準レイアウト」はありますか?

次のようなコメント ボックスがあります。

すべてのアクションを CommentBox コンポーネントにバインドしましたDelete。各コメントでイベントを処理する decComment アクションがあります。

deleteボタンをクリックするたびに、 ofを toにComment渡してコメント データを更新し、そのコメントをコメント データから削除して、コメント リストを再レンダリングする必要があります。commentIdCommentCommentListCommentBoxCommentBox

ここにいくつかのコードがあります：

このプロセスは冗長すぎます。これを行う簡単な方法はありますか？

backbone.jsこれまで、ほとんどのフロントエンド JavaScript プロジェクトで JavaScriptを使用してきましたが、Facebook のことを聞いてreact.js興味を持ち、色々調べ始めました。

クラスをもう使用するか、すべての「ビュー」を反応する「コンポーネント」に置き換えるかどうかBackbone.View、ページをレイアウトしている「ベースビュー」でさえも...

まだ s を使用しているインターウェブでいくつかの投稿を見つけましたが、Backbone.View作成された React クラスのみを見つけたものもあります。

• http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html
• https://usepropeller.com/blog/posts/from-backbone-to-react/
• http://blog.mayflower.de/3937-Backbone-React.html
• https://medium.com/react-tutorials

多分誰かが私を正しい方向に向けることができます...いつ、どのように単一ページアプリで複数の「ページ/状態」を最適に実装するために何を使用するか、通常の（もう我慢できます）TODOの例だけではありません。

ここで私が思いついたいくつかのコード：

バックボーンの初期設定:

app/router:

app/view/base.jsx:

しかし、私はこの設定に完全に満足しているわけではありません。任意の入力を歓迎します。

ReactJS を学習しようとしていますが、混乱しているのはコンポーネントのレンダリングです。私が見たすべての例は、React コンポーネント クラスを定義し、最後に次のようなものがあります。

「comp」要素をコンポーネントに置き換えることを理解しています..それは素晴らしいことです。しかし、20 個のコンポーネントをロードすると、20 個すべてがレンダリングされるようです。ただし、すべてではなく一部をレンダリングしたいだけで、SPA全体ですべてを使用します。私は DirectorJS ルーターを使用しています。ユーザーがログインしているかどうか、および/または特定のリンクにアクセスしているかどうかに応じて、1 つまたはそれ以上のコンポーネントのみを表示したいと考えています。反応コンポーネントの表示または非表示を動的に管理する方法に関する情報/例/チュートリアルが見つからないようです。さらに、私が本当にやりたいのは、クリックされたリンクに応じてパーシャルをロードすることであり、それらのパーシャルでは反応コンポーネントを使用するため、その時点でのみコンポーネントをロード/使用します。これは可能ですか..もしそうなら、どうすればこれを処理できますか? アプリを初めてロードするときに 20 以上のコンポーネントを 1 回ロードしても問題ありませんが、

React によるテスト utils で単体テスト コードを作成しました。しかし、問題が発生しました

私の環境は次のとおりです。

• レール4
• ジャスミン 2.0.0
• バックボーン 1.1.2

エラーメッセージは次のとおりです。

エラー: 不変違反: addComponentAsRefTo(...): ReactOwner のみが参照を持つことができます。これは通常、所有者を持たない (つまり、別のコンポーネントのrenderメソッド内で作成されていない) コンポーネントに ref を追加しようとしていることを意味します。ref を保持する新しい最上位コンポーネント内でこのコンポーネントをレンダリングしてみてください。

アップデート

このコードは問題ありません:

しかし、外部ファイルから通知コンポーネントをインポートしたいです。