Quiero hacer una ventana emergente y después de hacer clic en uno de varios elementos. Pensé que posiblemente la mejor solución sería tener el elemento emergente en el nivel superior de dom en lugar de copiarlo en cada uno de los elementos de la lista. Estaba tratando de encontrar una manera de cambiar su estado y me gustaría pedir ayuda para hacerlo. También agradecería una sugerencia sobre cómo podría manejar los botones emergentes para tener controladores separados para cada elemento de la lista.
const { useState } = React; function App() { return ( <div> <Container/> <Popup /> </div> ) } function Container() { const setPopupVisible = () => { console.log('Popup should appear') } return ( <ul> <li onClick={setPopupVisible}>Item 1</li> <li onClick={setPopupVisible}>Item 2</li> </ul> ) } function Popup() { const [visible, setVisible] = useState(false) return ( visible ? <div> <h3>Popup</h3> </div> : '' ) } ReactDOM.render(<App />, document.querySelector("#app"))Debe usar el portal de reacción para "mover" su componente popup a otro lugar dentro del DOM.
Una forma de hacerlo sería incluir el componente Popup en el componente Container como se muestra a continuación.
function Container() { const [isVisible, setIsVisible] = useState(false); const setPopupVisible = () => { console.log('Popup should appear') setIsVisible(true); } return ( <ul> <li onClick={setPopupVisible}>Item 1</li> <li onClick={setPopupVisible}>Item 2</li> </ul> <Popup visible={isVisible} /> ) } y el componente Popup será como a continuación. Utilice useEffect para detectar el cambio de accesorios
function Popup({visible}) { const [visible, setVisible] = useState(false); useEffect(()=>{ setVisible(visible); }, [visible]); return ( visible ? <div> <h3>Popup</h3> </div> : '' ) }