在 react 中,我们可以使用PropTypes
将特定道具标记为必需道具。
requiredFunc: PropTypes.func.isRequired,
Vue 还支持所需的道具:
propC: {
type: String,
required: true
},
如何在 lit-element 中做到这一点?一个框架声称它非常好,但不支持诸如必需属性之类的简单事物,这太有趣了。
在 react 中,我们可以使用PropTypes
将特定道具标记为必需道具。
requiredFunc: PropTypes.func.isRequired,
Vue 还支持所需的道具:
propC: {
type: String,
required: true
},
如何在 lit-element 中做到这一点?一个框架声称它非常好,但不支持诸如必需属性之类的简单事物,这太有趣了。
React 和 Vue 组件使用它们各自的运行时在受控环境中执行。Web 组件不能具有相同级别的净化环境。渲染周期是为 React/Vue/Angular/etc 完美定义的。Web 组件可以通过多种方式初始化:
// Using custom registered tag
const myComp = document.createElement('my-custom');
// Using constructor
const myComp = new MyCustom();
// Initialization using plain html
<div>
<my-comp>
</div>
所以,生命周期不容易不可控。让我们假设您有一个带有 prop - 的 Web 组件myRequiredProp
。并且,它被初始化为:
// Pass prop at the time of initialization
const myComp1 = new MyCustom({ myRequiredProp: 10 });
// Pass prop at a later time.
const myComp2 = new MyCustom();
// ... after some time
myComp2.myRequiredProp = 10;
// And how to pass props if component is being used directly in HTML.
// Is this right way? What if `my-required-prop` should be object and not a primitive like number or string?
<div>
<my-comp my-required-prop="10" />
</div>
另外,每个使用你的组件的框架都可以有自己的初始化 props 的方式。什么时候应该触发 prop 的验证。如果组件只是初始化并且从未渲染怎么办。在 Web 组件的情况下,要解决每个场景,这些决策都不容易。因此,最好将这种担忧留在核心之外。故意避免这种lit-element
开放式的决定。
话虽如此,您可以为道具构建自己的验证系统。您可以控制何时应该进行道具验证。例如,您可以在render
时间验证道具。
export class MyElement extends LitElement {
@property({})
count = 0;
@property()
name = 'World';
validateAllProps() {
// Your validation logic.
// Use joi or zod to validation `this`.
return true;
}
render() {
// Trigger validation here
if (!this.validateAllProps) {
console.warn('Invalid props');
}
return html`
<h1>Hello, ${this.name}!</h1>
<button @click=${this._onClick}>
Click Count: ${this.count}
</button>
`;
}
}
或者您也可以使用自定义设置器或使用转换器功能验证道具。
export class MyElement extends LitElement {
#name = 'World';
set name(name) {
if (typeof name !== 'string') {
console.warn('Invalid prop name for MyElement');
}
this.#name = name;
}
render() {
return html`
<h1>Hello, ${this.name}!</h1>
`;
}
}
您应该能够使用扩展 LitElement 的公共基类来概括验证行为,或者使用自定义装饰器来管理属性验证。
我同意LitElement
与 React 和 Vue 相比可能会感到尴尬,但总的来说,它有太多需要处理的问题,而 React 根本不需要处理。它很容易变得复杂。