Estoy tratando de usar Stencil.js para crear un componente de pestañas con la siguiente estructura:
<custom-tabs> <custom-tab active label="Label 1"> Some generic HTML content <custom-rating value="4"></custom-rating> </custom-tab> <custom-tab active label="Label 2"> Some more generic HTML content <custom-rating value="5"></custom-rating> </custom-tab> </custom-tabs>El componente principal necesita representar el HTML subyacente analizando cada componente de 'pestaña personalizada' (que no tiene el método de representación) y extrayendo el parámetro 'etiqueta' de cada pestaña, creando la lista de navegación de esas etiquetas y extrayendo de manera similar el el contenido principal de cada pestaña y se muestra en el panel correspondiente de la pestaña.
En mi componente principal, tomo las pestañas en el gancho 'componentWillLoad'
componentWillLoad() { // Grab tabs from this component this.tabs = Array.from(this.el.querySelectorAll('custom-tab')); console.log(this.tabs); }y luego en la función de renderizado trato de generar el contenido:
return ( <div> {this.tabs.map((tab: HTMLCustomTabElement, index: number) => { return ( <div role="tab" onClick={() => this.openTab(index)}> {tab.label} {tab.innerHTML} </div> ); })} </div> ); El problema es que tab.innerHTML no analiza el componente custom-rating y solo lo muestra como texto. ¿Podría sugerir la forma correcta de mostrar el contenido de la pestaña para que todo se analice correctamente?
Puede generar HTML configurando la propiedad innerHTML :
return ( <div> {this.tabs.map((tab: HTMLCustomTabElement, index: number) => { return ( <div role="tab" onClick={() => this.openTab(index)}> {tab.label} <div innerHTML={tab.innerHTML}></div> </div> ); })} </div> );