使用npm安装stencil组件，其方法不能直接在react中使用。 js和vue。 js

Question

我想在reacting.js和vue.js中使用stencil组件方法，但是我不能使用这个方法。此方法是使用 stencil.js 中的 @METHOD 创建的。我的代码如下：

输入REACT.JS

<li-rating ref={this.liRatingFontAwesome}></li-rating>

liRatingFontAwesome = React.createRef();
var liRating = this.refs.liRatingFontAwesome;
liRating.setSvgString();       <= Thit method can't find.

输入VUE.JS

<li-rating id="liRatingFontAwesome"></li-rating>

var liRating = document.getElementById("liRatingFontAwesome");
liRating.setSvgString();        <= Thit method can't find.




vue.esm.js?efeb:1897 TypeError: liRating.setSvgString is not a function
at VueComponent.mounted (RateDemo.vue?30fb:150)
at invokeWithErrorHandling (vue.esm.js?efeb:1863)
at callHook (vue.esm.js?efeb:4222)
at Object.insert (vue.esm.js?efeb:3148)
at invokeInsertHook (vue.esm.js?efeb:6351)
at Vue.patch [as __patch__] (vue.esm.js?efeb:6570)
at Vue._update (vue.esm.js?efeb:3948)
at Vue.updateComponent (vue.esm.js?efeb:4069)
at Watcher.get (vue.esm.js?efeb:4482)
at new Watcher (vue.esm.js?efeb:4471)

Answer 1

这可能是时间问题。即使 DOM 元素存在，Stencil 可能还没有完成加载组件，因此该方法可能还不存在于原型中。作为测试，尝试从 setTimeout() 中调用该方法，例如：

<li-rating id="liRatingFontAwesome"></li-rating>

var liRating = document.getElementById("liRatingFontAwesome");
setTimeout(() => liRating.setSvgString(), 2000);