Issue #2513💬 RespondidoAbierto el 17 de enero de 2020por msantoreReacciones 1

Añadiendo a componentes anidados

Respuesta rápidapor msantore1

¡Lo he descubierto! Solo tenía que especificar la posición del array :-) Después de usar 'component.find('fieldset')', asegúrate de establecer una posición del array 'fieldSet[0].append(questionFieldSet);'

Lee la respuesta completa abajo ↓

Pregunta

Estoy usando component.find() para buscar un componente anidado en una gran parte de contenido HTML para una etiqueta de conjunto de campos y así poder añadir componentes después. Component.find localiza el componente, como se ve en el console.log, pero intentar .append o usar .components para inyectar contenido resulta en un error de consola: fieldSet.append no es una función.

El objetivo es usar Traits para inyectar un fragmento de HTML usando la variable 'questionFieldSet' en el formulario después del primer 'fieldset'.

Si uso editor.getSelected().append, el HTML se inyecta pero en la posición incorrecta como se esperaba. Necesito inyectar profundamente dentro del componente anidado y .find() o .closest() no parece funcionar.

¿Qué API debería usarse para aplicar a componentes anidados? ¿Es esta la estructura adecuada para un componente con grandes bloques de HTML?

https://codesandbox.io/s/weathered-shape-xubqn

Para reproducir:

  1. Arrastra un bloque de Formulario de Solicitud sobre el lienzo.
  2. Selecciona el formulario de solicitud en el lienzo y haz clic en el icono de engranaje para cargar los rasgos
  3. Haz clic en "Añadir pregunta" en el gestor de rasgos.

Gracias

Respuestas (1)

msantore18 de enero de 2020

¡Lo he descubierto! Solo tenía que especificar la posición del array :-)

Después de usar 'component.find('fieldset')', asegúrate de establecer una posición del array 'fieldSet[0].append(questionFieldSet);'

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.

Explora plugins gratuitos →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.