0
229
Views¿Cómo colocar un elemento en un ancla seleccionada sin mostrar el contenido de cada ancla para cada ancla?
Tengo una lista de elementos (anclajes) y cada vez que se selecciona un elemento, quiero representar un componente (un selector de color) justo debajo de él:
import * as React from "react"; import clsx from "clsx"; import "./styles.css"; interface DropDownProps { index: number; } const DropDown: React.FC<DropDownProps> = React.memo(({ index }) => ( <div className="dropdown">dropdown for anchor {index}</div> )); export default React.memo(() => { const [selected, setSelected] = React.useState<null | number>(null); const handleSelect = React.useCallback( (index: number) => () => { setSelected(index); }, [] ); return ( <div className="wrapper"> {Array.from({ length: 3 }, (_, index) => { return ( <div className={clsx("anchor", { selected: selected === index })} onClick={handleSelect(index)} > anchor {index} ↓{selected === index && <DropDown index={index} />} </div> ); })} </div> ); }); El problema es que Array.from se expande a:
<div className={clsx("anchor", { selected: selected === 0 })}> {'anchor 0 ↓'} {selected === 0 && <DropDown index={0} />} </div> <div className={clsx("anchor", { selected: selected === 1 })}> {'anchor 1 ↓'} {selected === 1 && <DropDown index={1} />} </div> <div className={clsx("anchor", { selected: selected === 2 })}> {'anchor 2 ↓'} {selected === 2 && <DropDown index={2} />} </div> Me gustaría que el componente DropDown de alguna manera sea 'portado' a cualquier elemento que esté seleccionado actualmente, en lugar de ser renderizado condicionalmente en función del valor de selected . ¿Cómo puedo hacer esto?
1 answers
Answer question0
Puede lograr esto dando una id al div seleccionado, que usaremos para abrir el menú desplegable. Para hacer esto, useRef para recuperar y almacenar el elemento con la identificación. Dado que la identificación solo se asignará en la representación después de la selección, agregamos un useEffect para actualizar la referencia después de que la selección cambió, mientras usamos un useState de uso ficticio para forzar otra actualización (ya que establecer el valor de una referencia no provoca que se vuelvan a presentar). Luego, el menú desplegable aparecerá debajo del elemento correcto.
export default React.memo(() => { const [selected, setSelected] = React.useState<null | number>(null); const ref = React.useRef<HTMLElement | null>(null); const [_, forceUpdate] = React.useState(0); const handleSelect = React.useCallback( (index: number) => () => { setSelected(index); }, [] ); React.useEffect(() => { ref.current = document.getElementById("selected"); forceUpdate((prev) => prev + 1); }, [selected]); return ( <div className="wrapper"> {Array.from({ length: 3 }, (_, index) => { return ( <div id={selected === index ? "selected" : ""} className={clsx("anchor", { selected: selected === index })} onClick={handleSelect(index)} > anchor {index} </div> ); })} {selected !== null && !!ref.current && ReactDOM.createPortal(<DropDown index={selected} />, ref.current)} </div> ); });