Dynamically changing props (e.g. visibleEdgeColor) of Outline breaks it / no longer renders
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 38/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- react, three.js, typescript
調査の方向性
再現環境は EffectComposer と Outline を使用するリンク先の CodeSandbox です。まず実行し、fixed と changing visibleEdgeColor を比較してください。これらのコンポーネントのエントリーポイントをたどって、なぜ prop の更新でレンダリングが停止するのかを突き止め、EffectComposer の key を変更せずに色を変更でき、レンダリングが継続するようになったら問題を完了とみなしてください。
索引モデルが issue の本文から書いたものです。
説明
Problem
Demo of bug and workaround: https://codesandbox.io/s/bug-change-outline-color-dmu52j?file=/src/App.js
✅ Constant/fixed visibleEdgeColor
<EffectComposer multisampling={8} autoClear={false}>
<Outline
blur edgeStrength={100} width={500}
visibleEdgeColor="red"
/>
</EffectComposer>
🔥 Dynamically changing visibleEdgeColor breaks Outline, stops rendering
+ // `color` variable is dynamically changing
<EffectComposer multisampling={8} autoClear={false}>
<Outline
blur edgeStrength={100} width={500}
+ visibleEdgeColor={color}
/>
</EffectComposer>
Workaround
Changing the
visibleEdgeColorof Outline element breaks it.
Workaround is to change thekeyofEffectComposerso everything re-mounts and re-renders.
<EffectComposer
multisampling={8} autoClear={false}
+ key={color}
>
<Outline
blur edgeStrength={100} width={500}
- visibleEdgeColor={"red"}
+ visibleEdgeColor={color}
/>
</EffectComposer>
To see this in action, change the APPLY_WORKAROUND in the demo sandbox.
Is this expected behaviour? Thanks!
- 主要言語
- TypeScript
- スター
- 1.4k
- フォーク
- 134
- 平均マージ
- 4分
- マージ済み PR（30日）
- 4
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
pmndrs/react-postprocessing のほかの issue
-
難易度 3/5 1〜2日 初心者へのやさしさ 42/100
pmndrs/react-postprocessing#343 · コメント 1 件 ·
-
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
pmndrs/react-postprocessing#286 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
pmndrs/react-postprocessing#280 · コメント 2 件 · リアクション 1 件 ·
-
enhancement
pmndrs/react-postprocessing#253 · リアクション 4 件 · 担当者 1 名 ·
-
難易度 4/5 3〜5日 初心者へのやさしさ 25/100
pmndrs/react-postprocessing#240 · コメント 1 件 · リアクション 1 件 ·
pmndrs/react-postprocessing の issue をすべて見る
似ている issue
-
bug(cli): hapi doctor inline-media prints a fabricated B:\ helper-script path in packaged installs オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
-
Crush オープン
難易度 1/5 1時間未満 初心者へのやさしさ 85/100
catppuccin/catppuccin#3125 ·
-
Add a SECURITY.md オープン
難易度 1/5 1時間未満 初心者へのやさしさ 90/100
ElementsProject/cln-application#167 · コメント 1 件 · リアクション 1 件 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
Quantco/pnpm-licenses#17 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100