問題タブ [refs]

componentDidMount 関数で this.refs['test'] を使用してこのコンポーネントを取得できますが、this.refs['list'] を使用するとエラーが発生します。「ref={list=> { this.list = list}」を使用してコンポーネントの参照を追加し、「this.list」を使用してコンポーネントを取得しようとしましたが、これもエラーです。では、誰がコンポーネントを入手できますか。

div色の値が変更されたときに背景を変更しようとしています。色の値を受け取る私の関数は次のとおりです。

ここにcssクラスがあります

そして、実行時に背景を更新する必要がある私の div 要素を次に示します。

refs synatx についてよくわからないので、この問題の修正を手伝ってください。ありがとう。

three.jsでシーンを構築するために、 react-three-renderer ( npm、github ) を使用しています。

私はMVCEに要約したという問題を抱えています。参照が期待どおりに更新されていません。まず、主なコードは次のとおりです。

これは、react-three-renderer の github ランディング ページの例のフォークである、緑色のボックスで基本的なシーンをレンダリングします。左上のボタンは、シーン内の形状を青い円に切り替えます。もう一度クリックすると、緑色のボックスに戻ります。ref コールバックとcomponentDidUpdate. 私が遭遇している問題の核心はここにあります。トグル ボタンを初めてクリックした後、形状の参照が円を指していると思います。しかし、ログからわかるようにcomponentDidUpdate、ref ではまだボックスを指しています。

componentDidUpdate: アクティブな形状はボックスです

その後の行にログインすると、ref コールバックがヒットしたことがわかります

box ref null [React はメモリ リークを防ぐために古い ref で null を呼び出します]

circle ref [オブジェクト オブジェクト]

ブレークポイントをドロップして、検証および検査することができます。に入る前に、これら 2 つのことが起こるcomponentDidUpdateと思いますが、ご覧のとおり、逆に起こっています。どうしてこれなの？react-three-renderer に根本的な問題がありますか (もしそうなら、診断できますか?)、または React 参照を誤解していますか?

MVCE は、この github リポジトリで入手できます。ダウンロードして実行しnpm install、_dev/public/home.html を開きます。

前もって感謝します。

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

そうは言っても、私のシナリオではそれは非常に有効だと思います。具体的には、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 ハンドラーをリストの場所の近くに保持することを好みます。これは、ブラウザーでの不要な作業です。

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

Reactを学んでいます。さまざまなサイトの一部の人は、refs を使用するのは悪い習慣だと皆に言います (そうです、まったく使用していません)。

それと本当の取引は何ですか？たとえば、子コンポーネントにアタッチするのは悪いことですか（内部のものにアクセスできるようにします）？

ありがとう！

handleSubmit 関数で this.refs にアクセスしているときに問題が発生しました。

私のコンテナは次のようになります。

送信ボタンをクリックすると、handleSubmit は常に空のオブジェクトをログに記録します (入力が html で正しくレンダリングされている場合でも)。問題なく componentDidUpdate メソッドで this.refs にアクセスできることに気付きました。

handleSubmit で this.refs にアクセスできないのはなぜですか?

Reactを使って価格タブの機能を開発中です。これらのコンポーネントの主な機能は、ユーザーがこれらのクラスの価格の 1 つをショッピング カートに追加できるようにすることです。問題は、HTML タグの html 文字列を取得するにはどうすればよいかということです。私のサンプルコードは

また、すべての値を検出する 1 つのボタン イベントをバインドする方法はありますか? 助けてくれてありがとう...