1

Estoy creando un componente de tipo Toast para control de notificaciones, no quiero agregarlo a dom como:

<Toast title="notification" visible={state.toast} />

me parece poco practico y trendria que crear estados.

Como podria hacerlo utilizando una llamada de esta manera:

toast.info({title: 'notification'});

Componente Toast.

export const Toast = ({title}) => {
 return <div className="toast">
   {title}
 </div>
}

1 respuesta 1

1

Una forma puede ser envolver Toast en curly braces {} para poder usarlo como una expresión javascript:

function App(){
  function test(){
      console.log(Toast({title: 'notification'}));
  }
  return (
    <div>
      <button onClick={test}>test</button>
      {/*Toast({title: 'notification'})*/}
    </div>
  )
}

const Toast = ({title}) => {
  return <div className="toast">
    {title}
  </div>
 }

ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>

Ahora, aunque se llame de esta forma, el div en Toast es un Elemento ReactJS y sigue siendo parte del Virtual DOM tree de ReactJS.

Espero que esta respuesta sea de ayuda.

4
  • Preferiblemente quiero llamarlo dentro de una funcion y no dentro del return
    – DoubleM
    el 11 feb. 2021 a las 20:38
  • Interesante, entonces tu componente Toast, no forma parte del render, tampoco necesita regresar ningún elemento, solo propiedades, en este caso solo quieres regresar title ¿Ese es tu caso de uso?
    – g.4
    el 11 feb. 2021 a las 21:05
  • No, necesito que se llame el elemento de manera dinamica en una funcion sin tener que meterlo al render
    – DoubleM
    el 11 feb. 2021 a las 21:08
  • Actualice la respuesta, es lo más que se me ocurre por ahora, en el console.log se obtiene un typeof react Element, saludos
    – g.4
    el 11 feb. 2021 a las 21:16

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.