Me gustaría crear una notificación simple con un botón para descartar en un sitio React estático. Digamos que tengo mi componente configurado así:
// layout.js import * as React from 'react' const Layout = ({showNotification = true}) => <div> <header>HEADER</header> {showNotification ? <div style={{display: showNotification ? "flex" : "none"}}> NOTIFICATION <span onClick={() => {showNotification = false}}> DISMISS </span> </div> : null} <main>MAIN CONTENT</main> <footer>FOOTER</footer> </div> export default Layout Espero que, dado que la propiedad de display se establece en función del valor de showNotification y dado que onClick actualiza el valor de showNotification, hacer clic en el intervalo "Descartar" ocultaría toda la notificación.
Sin embargo, por lo que puedo decir, se llama al controlador onClick y actualiza el valor de showNotifications, pero eso no se refleja en el renderizado.
¿Cómo puedo configurar esto para que pueda hacer que onClick actualice el estado del componente de una manera que se refleje en el resto del componente?
showNotification es un accesorio. No se puede cambiar directamente. Además de showNotification, debe pasar una función que cambia el estado en el componente donde se establece el estado. Aquí hay un ejemplo:
import React, {useState} from 'react' const App = () => { const [showNotification, setShowNotification] = useState(true) const toggleShow = () => setShowNotification(!showNotification) return ( <div> Some content <Layout showNotification={showNotification} toggleShow={toggleShow} /> </div> ) } export const Layout = ({showNotification, toggleShow}) => <div> <header>HEADER</header> {showNotification ? <div style={{display: showNotification ? "flex" : "none"}}> NOTIFICATION <span onClick={toggleShow}> DISMISS </span> </div> : null} <main>MAIN CONTENT</main> <footer>FOOTER</footer> </div> export default App