Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

Dynamically changing props (e.g. visibleEdgeColor) of Outline breaks it / no longer renders

Fechada
  • Algo errado?
#143 2 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
38/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
react, three.js, typescript
Domínio
computer-graphics, frontend

Direção de pesquisa

A reprodução é o CodeSandbox vinculado que usa EffectComposer e Outline; comece executando-o e comparando fixed com changing visibleEdgeColor. Rastreie esses pontos de entrada dos componentes para descobrir por que a atualização da prop deixa de renderizar, e considere o problema concluído quando a cor puder mudar sem alterar a key do EffectComposer enquanto a renderização continua.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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>
image

🔥 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>
image

Workaround

Changing the visibleEdgeColor of Outline element breaks it.
Workaround is to change the key of EffectComposer so 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!

Linguagem predominante
TypeScript
Estrelas
1.4k
Forks
138
Merge médio
3h 13min
PRs com merge (30d)
12

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de pmndrs/react-postprocessing

Todas as issues de pmndrs/react-postprocessing

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.