reactjs - 类型错误 : Cannot call a class as a function in stenciljs

Question

我试图在我的模板项目中使用 multiselect-react-dropdown 包，但是在渲染时我收到了这个错误，我找到了很多 react 的解决方案，但没有任何真正的工作，任何人都可以帮助在 stenciljs 中做同样的事情。

import { Component, h, State } from '@stencil/core';
import { Multiselect } from 'multiselect-react-dropdown';


@Component({
    tag: 'ui-card',
    styleUrl: 'style.scss',
    shadow: true
})

export class UiCard {
    @State() state: any;

    constructor() {
        this.state = {
            options: [{ name: 'Srigar', id: 1 }, { name: 'Sam', id: 2 }]
        };
    }

    onSelect(selectedList, selectedItem) {
        console.log(selectedItem)
        console.log(selectedList)
    }

    onRemove(selectedList, removedItem) {
        console.log(selectedList)
        console.log(removedItem)
    }
    render() {
        return (<div>
            <Multiselect
                options={this.state.options}
                selectedValues={this.state.selectedValue}
                onSelect={this.onSelect}
                onRemove={this.onRemove}
            />
        </div>)
    }
}

Answer 1

StencilJS 与 React 无关。
事实上，他们都在使用 JSX/TSX作为标记语言，但 React 使用它自己的 React它的实现，而 StencilJS 使用 h jsx工厂。
您可能知道，JSX 会转化为常规函数调用，例如 createElement它返回一个要渲染的虚拟 DOM 对象。
因此，要将 Virtual DOM 对象渲染到页面，您需要调用 ReactDOM.render() , 同时 Stencil 将其编译为 web 组件。
尽管有很多常见的东西，比如 JSX , props/state和其他 - React 和 StencilJS 是完全不同的工具。
您可以使用 <slot>作为一种解决方法，但我认为可能存在一些性能问题。