Creé un componente de plantilla () que usa otro componente de plantilla () en la plantilla renderizada.

Uno de los accesorios ( clave: cadena ) pasado de smg-compound-filter a smg-filter no está definido, mientras que los otros accesorios están bien definidos. Me aseguré de que {filter.key} esté definido en la plantilla de smg-compound-filter e incluso traté de pasar una cadena literal a smg-filter , pero no está definido en este componente. Creo que me estoy perdiendo algo. Si alguien pudiera darme una idea, sería muy útil.

smg-compound-filter.ts (función de renderizado)

 render() { return ( <div class="smg-filter-container"> <div class={`filters`}> this.filters.map(filter => { return ( <div class='filter'> <smg-filter key={filter.key} // even "str" doesn't work label={filter.label} target={filter.target} options={filter.options} customClasses='secondary' onFilterChanged={(event) => {this.toggleOption(event)}} > </smg-filter> </div> ); }) </div> </div> ); }

smg-filtro.ts

 export class SmgFilter { @State() filter: Filter; @State() showOptions: boolean; /** custom classes to adapt style */ @Prop() customClasses: string; /** smartsheet column linked to the filter */ @Prop() key: string; /** label of the filter */ @Prop() label: string; /** options */ @Prop() options: FilterOption[]; /** type of products to be filtered: 'master' or 'product' */ @Prop() target: FilterTarget; @Event() filterChanged: EventEmitter<Filter>; componentWillLoad() { console.log(this.key); // undefined this.showOptions = !isSecondary ? true : false; this.filter = { key: this.key, target: this.target, label: this.label, options: this.options, }; }