Question

我试图在模板项目中使用multiselect-react-dropdown包，但是在渲染时出现此错误，我发现了很多解决方法，但没有真正起作用，有人可以在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 jsxFactory。
如您所知，JSX被转换为诸如createElement之类的常规函数调用，这些函数返回要渲染的Virtual DOM对象。
因此，要将虚拟DOM对象呈现给页面，您需要调用ReactDOM.render()，同时Stencil将其编译为Web组件。
尽管有JSX，props/state之类的许多常见事物，但React和StencilJS是完全不同的工具。

您可以使用<slot>作为解决方法，但我认为可能存在一些性能问题。

Answer 2

尽管我不推荐这样做，但可以通过在组件中包含react运行时（在听起来很无效）来在Stencil中使用react组件。

在这里查看我的答案：https://stackoverflow.com/a/62046928/2897426。它用于使用非常相似的react-bootstrap组件。请注意，Stencil的JSX（或实际上是TSX）与React的JSX不兼容，因此您不能使用JSX传递属性。就像

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

@Component({
    tag: 'ui-card',
    styleUrl: 'style.scss',
    shadow: true
})
export class UiCard {
  @Element() host: HTMLUiCardElement;

  @State() state: any;

  @Watch('state')
  onStateChange() {
    const props = {
      options: this.state.options,
      // ...
    };

    ReactDOM.render(React.createElement(Multiselect, props), this.host);
  }

  componentWillLoad() {
    this.onStateChange();
  }

  render() {
    return <Host />;
  }
}

同样，我不建议您这样做，因为它会在整个React运行时中使您的组件完全膨胀。只是说有可能。

TypeError：无法在Stenciljs中将类作为函数调用

2 个答案: