0

en el envío de un popup envío la información de lo que tengo que mostrar, como puedes ver a continuación

return (dispatch) => {
    const popup = showPopUp({
      title: 'Important notice',
      component: 'alertInfo',
      buttons: [
        {
          label: 'Agree',
          event: () => { dispatch(closePopup());},
        },
      ],
    });

Ahora estoy utilizando un componente de una librería externa que he probado en el componente desde el que se dispara el popup y funciona correctamente de la siguiente manera

import Image from "@design-library";


<Image type="alertInfo" />,

Hasta ahora en el "componente" enviaba una url para mostrar una imagen pero ahora quiero mostrar un elemento React que recibo de esta librería externa. Cuando paso el string por la propiedad type debería mostrar una u otra imagen. El problema es que cuando lo incluyo en el popup no muestra nada.

import Image from "@design-library";

export function showPopUp({
  title, text, image = {}, buttons = [], options = {}, component,}) {

  const popup = {
    text: {
      title,
    },
    component: <Image type={component} />,
    image: { style: { marginTop: '8px' }, ...image },
    buttons: [],
    ...options,
  };

Estos son los datos que se construyen para la ventana emergente.

{
  "text":{"title":"Alert"},
  "component":{"key":null,"ref":null,"props":{"type":"alertInfo"},"_owner":null,"_store": 
    {}},
  "image":{"style":{"marginTop":"8px"}},
  "buttons":[],
}

Esta es una imagen del componente por consola

introducir la descripción de la imagen aquí

¿Cómo puedo mostrar la imagen que consigo renderizar en el componente principal dentro del popup? ¿Qué estoy haciendo mal? Gracias a todos por su tiempo y ayuda de antemano.

1 respuesta 1

1

Según comentas:

Hasta ahora en el "componente" enviaba una url para mostrar una imagen.

La prop "componente" esta preparada para recibir un string y ahora le estas enviando un componente.

Habría que ver que se hace con el object "popup"

 const popup = {
    text: {
      title,
    },
    component: <Image type={component} />,
    image: { style: { marginTop: '8px' }, ...image },
    buttons: [],
    ...options,
  };

¿Quien se encarga de renderizar el popup? Una librería? un componente tuyo? Es ahí donde habría que ver que espera la propiedad "componente" y que se puede hacer.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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