StencilJS @Prop()变量未定义

Question

我创建了一个模板组件()，它在渲染的模板中使用另一个模板组件()。

其中一个道具(key: string)smg-compound-filter到smg-filter是未定义的，而其他props是定义良好的。我确保{filter.key}在smg-compound-filter模板中定义，我甚至试图传递一个字面值字符串到smg-filter，但在这个组件中没有定义。我想我漏掉了什么。如果有人能给我一些建议，那就太有帮助了。

smg-compound-filter。ts(渲染函数)

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-filter.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,
};
}

Answer 1

这是因为key是一个保留关键字，因为Stencil使用它来提高循环呈现性能。

我不能100%确定它是否可以更改或禁用，但我认为你必须使用另一个属性名称。

Answer 2

@Prop() name "key"是保留的公共名称。请重命名"键"。道具，所以它不冲突现有的标准化原型成员。重用已经在元素上定义的道具名在各种浏览器上，原型可能会导致意想不到的运行时错误或用户界面问题，因此最好完全避免。