Creé un componente de brindis personalizado como se ve a continuación:
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose} message="Note archived" action={action} />No quiero adjuntarlo a cada página que creo en mi aplicación de reacción. En cambio, quiero crear una función estática que pueda usar para llamarla. Algo como esto:
Swal.fire( 'Good job!', 'You clicked the button!', 'success' )Pero para que esto funcione, debo agregar un componente al HTML. Por favor como puedo lograr esto. Intenté hacer esto:
ReactDOM.render(<OvToast content="hello" handleClose={() => console.log('this is it')} open title="success" type="success" />, document.querySelector('#root'));pero elimina todo el contenido de la página excepto el brindis. Por favor, ¿cómo agrego Jsx a un HTML? Quiero lograr un mensaje de brindis.
Cuando utiliza la función render() , se elimina todo el contenido del elemento de destino y se carga el nuevo contenido. Si desea agregar el contenido a HTML existente, puede crear un nuevo <div> (o cualquier otro elemento) y agregar el elemento. Luego represente los contenidos en el elemento recién creado.
function App() { return <React.Fragment>hello friend</React.Fragment>; } const div = document.createElement("div"); document.querySelector("#root").append(div); const root = ReactDOM.createRoot(div); root.render(<App />); // Or if you are using React 17 or lower: // // ReactDOM.render(<App />, div); // <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id="root"> <p>existing content</p> </div>cambiar de opinión La forma correcta es agregar ese componente a app.js.
Luego, usando redux, establezca el valor de mensaje y booleano, etc. para mostrar u ocultar el componente.
Ahora puede cambiar el valor del mensaje e isShow en cualquier página que desee usando redux.