Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
#143 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
38/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
react, three.js, typescript
Área
computer-graphics, frontend

Línea de trabajo

La reproducción es el CodeSandbox enlazado que usa EffectComposer y Outline; empieza ejecutándolo y comparando fixed con changing visibleEdgeColor. Sigue esos puntos de entrada de los componentes para averiguar por qué la actualización de la prop deja de renderizar, y considera el problema resuelto cuando el color pueda cambiar sin cambiar la key de EffectComposer mientras el renderizado continúa.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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!

Lenguaje dominante
TypeScript
Estrellas
1.4k
Forks
134
Merge medio
4 min
PR fusionados (30 d)
4

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de pmndrs/react-postprocessing

Todos los issues de pmndrs/react-postprocessing

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.