問題タブ [react-component]

次のように React.js を使用してサイト全体を構築しています。

しかし、データ保持コンポーネントの 1 つである MainFlow または AddElementWrapper で setProperties を呼び出すと、親を介してデータを操作する必要があることを示すエラーが表示されます。

まず、これは、操作したいコンポーネントに別の所有者がいる場合にのみ問題になると思いました。ただし、私のコンポーネントには、所有者としての React コンポーネントがなく、親としての HTML 要素だけがあります。

すべてのアプリケーション データを単一のルート コンポーネントに接続することで、この問題を回避できました。ただし、特定のデータ セットを個別に保持したいと考えています。方法はありますか？

refReactを使用してプロパティを使用しようとしています。ブラウザに奇妙なエラーが表示され、何が問題なのかわかりません。このエラーが発生する理由を誰かに説明してもらえますか:

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

このコードがある場合:

その背後にはさまざまな理由がありますが、JSX の要素にカスタム属性を単純に追加するにはどうすればよいのでしょうか?

この質問は、React 0.14 に関するリリース ノート (およびその他の関連する誇大広告) を読んで以来、頭の中でぐるぐる回っています。私は React の大ファンであり、ステートレス コンポーネント ( https://facebook.github. io/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components ) は、そのようなコンポーネントを書きやすくすることと、これらのコンポーネントの意図をコードで表現することの両方の点で優れたアイデアです。コンポーネントは、同じ小道具データに対して一貫してレンダリングするという点で「純粋」でなければなりません。

問題は、React がこれらのステートレス コンポーネント関数を完全に独り占めせずに最適化し、props 参照がコンポーネント内で操作されるべきではないという点で不変であるだけでなく、決して変更できないと仮定することをどのように可能にするかです。コンポーネントのライフサイクル外？「通常の」コンポーネント (別名ステートフル コンポーネント - つまり、ライフサイクル全体を通過するコンポーネント、componentWillMount、getInitialState など) にオプションの「shouldComponentUpdate」機能がある理由は、Reactがすべての小道具と状態の参照は完全に不変であると仮定します。コンポーネントがレンダリングされた後、props 参照の特定のプロパティが変更される可能性があるため、同じ「props」インスタンスが後で異なる内容を持つ可能性があります。これが部分的には、完全に不変な構造の使用に多くの興奮があった理由であり、React で Om を使用するとパフォーマンスが大幅に向上する可能性があると言われている理由の 1 つです。そこで使用される不変の構造により、任意のオブジェクトの特定のインスタンスが決して変更されないことが保証されるため、 shouldComponentUpdate は小道具と状態に対して非常に安価な参照等価性チェックを実行できます ( http://swannodette.github.io/2013/12/17/the -future-of-javascript-mvcs/ )。

私はこれについてより多くの情報を見つけようとしていますが、どこにもありません。props データが不変の型で構成されると仮定せずに、ステートレス コンポーネントの周りでどのようなパフォーマンスの改善を行うことができるかを想像することはできません.おそらく、不変でない props 型の予備分析を行って、「props」と「nextProps」が同じデータ？

誰かが内部情報や、これに関する啓発的な洞察を持っているかどうか疑問に思いました. Reactが props 型を「完全に不変」にすることを要求し始めた場合 (データが変更されていないことを確認するために参照の等価性比較を許可する)、それは大きな前進だと思いますが、大きな変化になる可能性もあります。

データのリストがあるとします。

各行にはユーザー名の列が含まれています。

username 列には UserName 反応コンポーネントが含まれています。

UserName コンポーネントは、その componentDidMount() で ajax リクエストを実行して、HTTP GET から実際のユーザー名を取得します。

複数の行に同じユーザー名が含まれます。

私が抱えている問題は、一意のユーザー名ごとに ajax リクエストを 1 つだけ送信するにはどうすればよいですか?

現在起こっていることは、各 UserName コンポーネントが独自の ajax リクエストを送信して、HTTP GET からユーザー名を取得していることです。

私は redux を使用していないので、解決策ではないことに注意してください。

ありがとう

React を初めて使用するので、かなり簡単に見えるはずの作業に行き詰まっています。何が間違っているのかわかりません。

次のようなコンポーネントBasicReactComponent.jsがあります。

以下のように私のメインファイルでそれを呼び出そうとしています:

以下のエラーが発生し続けます