やあみんな!
したがって、このアプリケーションでは、「ヘルプセクション」と呼ばれるコンポーネントを作成しています。 これは基本的に、ユーザーがいじっているコンポーネントに関する事前定義されたテキストを表示するボックスです。
「ヘルプセクション」コンポーネントに、どのコンポーネントのヘルプを表示するかを指示できるようにしたい。 今のところ、私はいくつかのアクションとストアでFluxを使用しています。 これはそれほど悪くはなく、非常にうまく機能しますが、この目的のために特別に定義された2つのファイルがある、非常に大きなセットアップです。 他のアクションが原因で「ヘルプセクション」アクションがディスパッチされる(「ディスパッチの途中でディスパッチできません」エラーが発生する)など、私が経験した他の多くの問題もあります。
ただし、「ヘルプセクション」をシングルトンとして定義できれば、「ヘルプセクション」のインスタンスを取得するので、 import helpSection from './HelpSection
だけで完了できます。 私がしなければならないのは、変更したいプロパティを設定して呼び出すメソッドをhelpSection
公開することだけです。
コンポーネントが別のコンポーネントを変更することで、Reactの一方向のデータフローを壊すことは知っていますが、それだけの価値がある場合もあります。 私の考えでは、ストア、いくつかのアクション、およびコンポーネントを1つのオブジェクトに組み合わせたようなものです。 多くのコンポーネントは実行時に一度だけインスタンス化されるため、場合によっては非常に役立つことがあります。
このJSfiddle以外では、
私はJavaScriptとReactの初心者なので、いくつかの明らかなポイントを見逃しているかもしれませんが、そうでないことを願っています。
これについてあなたはどう思いますか?
読んでくれてありがとう。
(PSあいまいさで申し訳ありませんが、英語は私の母国語ではありません...:smile :)
これは、Reactコアのバグというよりは、使用法に関する質問のように見えます。 Reactコアのバグを追跡するためにgithubの問題を使用しようとしているため、StackOverflowなどのサイトでは使用法に関する質問への回答が適切です。 このため、この問題を解決しますが、ここで会話を続けるか、StackOverflowに移動してください。
あなたの質問に関して、私の個人的な推奨は、シングルトンを避けることです。
http://stackoverflow.com/questions/137975/what-is-so-bad-about-singletons
返信いただきありがとうございます。
Reactコンポーネントを私が知らないシングルトンとして作成する方法はすでにありますか? (JSfiddleは、先輩の1人によって評価されるまで信頼しません)。 ある場合は、ドキュメントで何も見つからなかったので、私と共有してください。
親子関係を持たない2つのコンポーネント間の通信のために、独自のグローバルイベントシステムを設定できます。
..。
フラックスパターンは、これを調整するための可能な方法の1つです。
ご覧のとおり、シングルトンについては言及されていません。 あなたが提供したStackOverflowリンクでは、多くの人が実際にシングルトンを使用すると便利な場合があると言っていました。 2番目の答えから:
シングルトンは1つ(そして1つだけ)の問題を解決します。
リソースの競合。
あなたがそのリソースを持っている場合
(1)インスタンスは1つだけで、
(2)その単一のインスタンスを管理する必要があります。
シングルトンが必要です。
これは私のユースケースのように聞こえます(そしてReactの世界ではもっとたくさんあります)。
コンポーネントを使用するための適切な方法のように思われるため、これはGitHubの問題として依然として関連していると思います。また、ドキュメントにはそれへの参照が含まれている必要があると思います。
Reactコンポーネントインスタンスには、そのインスタンスがツリー内のどこにあるかを知るために必要な内部状態があります。 同じインスタンスを複数の場所にレンダリングすることはできません。 したがって、シングルトンインスタンスの概念は、Reactの世界では意味がありません。
そのフィドルに示されているのは、主に単一インスタンスの引数のために、私がシングルトンと呼ぶものではありません。それは、独自の状態を持つモジュールのようなものです。 次に、インスタンスがレンダリングされると、囲まれた(ただし実際には「グローバル」)状態が使用されます。 マウントされたインスタンスへの参照を不正に使用してグローバル状態で保存し、マウントされたインスタンスを強制的に更新します。 これで、これらをさらにレンダリングすることを実際に妨げるものは何もありません。その結果、最初のレンダリングが更新されなくなります。 同様のことを簡単に実行して、1を超えるレンダリングをサポートできます。
ドキュメントでこれを参照している場合は、これを行いません。 Reactで実現できるパターンはたくさんありますが、それらすべてについて説明することはしません。
返信に時間を割いていただきありがとうございます、ジェームズ。
まず、私はあなたのポイントを完全に理解し、あなたがJSfiddleを調べたという事実に感謝します。 最後に述べさせていただきます。
大変だったことがもっと楽になりたいです。 それは数行の問題であり、将来的に初心者を助けることができると思います。
私はいつも巨大なコメントを書くことになります..私に固執して読んでくれてありがとう。 :スマイル:
こんにちは@all 、
別の視点を加えて、この会話を復活させたいと思います。 Wir react @ 16ポータルを使用して、DOMの特定のポイントにコンポーネントをマウントすることができます。 このユースケースでは、このようにApp.jsx
マウントされる特定の他のコンポーネントにレンダリングする必要がある、モーダルや通知などのさまざまなコンポーネントを構築しています。
App.jsx
[...]
render() {
return (<SingletonOverlay></SingletonOverlay>)
}
[...]
Notification.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import NotificationComponent from './Notification.js';
import SingletonOverlay from '../general/Overlay.js';
export default class Notification extends React.Component {
constructor(props) {
super(props);
this.state = {
element: null
};
}
componentDidMount() {
this.setState({ element: ReactDOM.findDOMNode(SingletonOverlay) });
}
render() {
return this.state.element
? ReactDOM.createPortal(
<NotificationComponent>That is a notification</NotificationComponent>,
this.state.element,
)
: null;
}
}
もう1つのオプションは、 document.findElementById
または同様の関数を使用してdomNodeを見つけ、それらをReactDOM.findDOMNode
に渡すことです。これにより、「React-Cosmos」を離れることを余儀なくされるため、非常に不快に感じます。
したがって、上記の機能については、インスタンス自体を渡すのではなく、関数に渡す特定のコンポーネントのインスタンスを検索できるようにしたいと思います。 この問題を解決する方法に関する他のアプローチにも興味があります。
@jimfbこれは機能提案の価値がありますか?
最も参考になるコメント
こんにちは@all 、
別の視点を加えて、この会話を復活させたいと思います。 Wir react @ 16ポータルを使用して、DOMの特定のポイントにコンポーネントをマウントすることができます。 このユースケースでは、このように
App.jsx
マウントされる特定の他のコンポーネントにレンダリングする必要がある、モーダルや通知などのさまざまなコンポーネントを構築しています。App.jsx
Notification.jsx
もう1つのオプションは、
document.findElementById
または同様の関数を使用してdomNodeを見つけ、それらをReactDOM.findDOMNode
に渡すことです。これにより、「React-Cosmos」を離れることを余儀なくされるため、非常に不快に感じます。したがって、上記の機能については、インスタンス自体を渡すのではなく、関数に渡す特定のコンポーネントのインスタンスを検索できるようにしたいと思います。 この問題を解決する方法に関する他のアプローチにも興味があります。
@jimfbこれは機能提案の価値がありますか?