0
129
VisualizaçõesLos elementos secundarios forwardRef del componente apuntan todos a la misma referencia en una matriz
Tengo un componente de función que toma una cantidad variable de componentes de función secundarios (forwardRef). Lo que me gustaría lograr es tener una referencia a cada uno de los componentes secundarios para animaciones cuando se hace clic en un componente secundario. Tengo una solución semi-funcional al crear una matriz de referencias y luego clonar a todos los niños y pasar una referencia indexada a cada uno de ellos. El único problema es que todas las referencias en el índice apuntan al mismo (último) hijo.
Aquí están mis componentes:
const Navbar = ({children}) => { const [activeLink, setActiveLink] = useState(0); const linkRefs = Array(children.length).fill(React.createRef(null)); const handleActiveLinkChange = (index) => { setActiveLink(index); console.log(linkRefs[index].current); } return ( <nav> {React.Children.map(children, (child, index) => React.cloneElement(child, {index: index, active: index === activeLink, handleActiveLinkChange, key: "child" + index, ref: linkRefs[index]}))} </nav> ) } const Link = React.forwardRef(({children, active, index, handleActiveLinkChange}, ref) => { return ( <a href="#" style={linkStyle} onClick={() => handleActiveLinkChange(index)} ref={ref}> {active ? <b>{children}</b> : children} </a> ) });Y suponiendo que uso los componentes de la siguiente manera:
<Navbar> <Link>One</Link> <Link>Two</Link> <Link>Three</Link> <Link>Four</Link> <Link>Five</Link> </Navbar>Espero que los árbitros sean:
| Índice de matriz de referencia | Corriente de referencia |
|---|---|
| 0 | Una |
| 1 | Dos |
| 2 | Tres |
| 3 | cuatro |
| 4 | Cinco |
Pero las referencias que obtengo son:
| Índice de matriz de referencia | Corriente de referencia |
|---|---|
| 0 | Cinco |
| 1 | Cinco |
| 2 | Cinco |
| 3 | Cinco |
| 4 | Cinco |
Supongo que tiene algo que ver con el alcance variable, pero no puedo descubrir la causa del problema. He probado muchas variaciones de bucles y funciones, pero prefiero entender la causa que tratar de encontrar una solución a ciegas.
1 Respostas
Responde à pergunta0
El problema es con la siguiente línea. Crea solo una referencia y todos los índices de matriz se refieren a esa única referencia.
const linkRefs = Array(children.length).fill(React.createRef(null));En lugar de lo anterior, use la siguiente línea que crea nuevas referencias para cada niño como espera.
const linkRefs = Array.from({ length: children.length }, () => React.createRef(null) ); 