3

まず、参照を使用してはならないことを理解していると言うことから始めましょう。

そうは言っても、私のシナリオではそれは非常に有効だと思います。具体的には、window.onscroll ハンドラーを使用しており、onscroll ハンドラーの小道具を単純に変更することはできません。onscroll ハンドラーで状態または props を変更すると、子コンポーネントが頻繁に再レンダリングされ、遅延が非常に大きくなります。

したがって、私のシナリオでは、スクロール時に要素のスタイルを設定するだけでよいため (つまり、ページがスクロールされて表示されなくなったときにページの上部に何かを貼り付けます)、設定するだけでラグが0になりますthis.refs.myelement.style.position = 'fixed'

私の問題は、私が現在行っていることです：

this.refs.childelement.refs.childschildelement.refs.childschildschildselement.refs.style.position = 'fixed'

基本的に、onscroll handlerスタイルを設定したい実際の要素に対して 3 人の親が反対しています。

マイページはListコンポーネントで構成されています。これはReadOnlyOrEditableコンポーネントで構成されています。編集可能なコンポーネントはRichTextEditors、Component を持つものToolbarです。Toolbar ウィンドウスクロールイベントが発生したときに位置を固定する必要があるのはこれです。

したがって、ページには約 10 個ReadOnlyOrEditableのコンポーネントがあり、そのうち 5 個がRichTextEditorsで、それぞれがToolbar.

ツールバーには、斜体、太字などのボタンがあります。

ユーザーが下にスクロールしたときに、ツールバーが表示されなくなった場合にユーザーが上にスクロールする必要がないようにします。つまり、ツールバーが表示されなくなった場合に固定される位置を設定して、ユーザーが斜体/太字/などをすぐに押すことができるようにします。

では、上から下に参照を渡すことなく、これをより良くするにはどうすればよいでしょうか? 私が今持っている方法は非常に醜いです...

各 Toolbar コンポーネントに window.onscroll ハンドラーがあるということは、複数の window.scroll ハンドラーを設定していることを意味するため、onscroll ハンドラーをリストの場所の近くに保持することを好みます。これは、ブラウザーでの不要な作業です。

どんな提案でも大歓迎です。

4

2 に答える 2

0

すべてのことと同様に、1 つの問題を解決するには多くの方法があると思います。

  1. ノードスクロールイベントへの登録/登録解除、および「サービス」への所定の位置でのカスタムイベントの発生の責任を抽象化します。
  2. スクロール可能なコンポーネントまたはアプリ コンテナー (Listコンポーネント?) は、スクロール通知サービスとその子の間の接着剤になります。
  3. スクロール可能なコンポーネントは、props を介してその子にカスタム登録関数を渡します。このカスタム登録関数は、位置を監視するためのノード (ツールバー) と、位置を設定/設定解除するためのコールバックを受け取ります。
  4. 子 (RichTextEditorコンポーネント) は、ノードからの関数 (例: onRegisterPinableToolbar)と、子がそのノード スタイルを変更するために使用できるコールバックを呼び出します。componentDidMountReactDOM.findDOMNode

ノート：

  • もちろん、 でクリーンアップする必要もありますcomponentWillUnmount。
  • あなたのアプリケーションについてはよくわかりませんが、エディタ用の HOC を作成してみます。PinableToolbarRichTextEditor
  • register to scroll イベントをサービスに抽象化することで、requestAnimationFrame を使用して最適化し、古いブラウザーにフォールバックを提供できます。
  • 子に渡される関数は次のようになります(node:Node, setPinability:Function) => unregister:Function

私はネーミングpinabilityが最高ではないことを知っています

于 2016-11-08T01:35:52.937 に答える
0

深くネストされたコンポーネントへの参照を取得しようとする代わりに、'fixed' 状態を小道具として渡し、偉大な (偉大な?) 孫にプロパティをチェックさせ、独自のスタイルを設定させます。

于 2016-11-09T20:23:14.930 に答える