StencilJS，如何通过相对渲染组件的React ref读取/获得类中声明的所有道具?

Question

我试图从另一个FW获得StencilJS web组件类中定义的所有属性，这类似于React但专有(因此不幸的是我无法发布工作片段)。

在模板组件类的源代码中，props是这样定义的:

import { EventEmitter } from '@stencil/core';
import { CssClassMap } from '../../utils/utils';
import { StyleSheet } from 'jss';
import Base from '../../utils/base-interface';
export declare class Link implements Base {
/** (optional) Tag class */
customClass?: string;
/** (optional) Tag size */
size?: string;
/** (optional) Tag variant */
variant?: string;
/** (optional) Tag href */
href?: string;
/** (optional) Tag target */
target?: string;

/** (optional) Close icon click event */
linkClose: EventEmitter<MouseEvent>;
componentWillUpdate(): void;
componentDidUnload(): void;
handleClose(event: any): void;
render(): any;
}

我无法在Stencil文档中找到如何获得这些道具列表的任何地方。在输入中，我将其引用为componentDidMount函数中通过简单document.querySelector获得的节点元素。

关于如何实现这一目标，如果这是可能的，有什么想法吗?

谢谢。

Answer 1

尝试通过attributes(这等于Stencil props)访问

const attributes = [];
const ref = document.querySelector('yourWebComponent');
for (i = 0, atts = ref.attributes, n = atts.length, arr = []; i < n; i++){
attributes.push(atts[i].nodeName);
}