jsx - Stenciljs：找不到另一个组件

Question

我在 Stenciljs 中创建了一个新项目，但在使用该项目中创建的组件时遇到问题。

import { Component, h, Prop } from '@stencil/core';

@Component({
    tag: 'fd-story',
    styleUrl: './story.css',
    shadow: true
})
export class Story {

    @Prop() name = '';

    render() {
        return (
            <div class="label">
                <span>{this.name}</span>
            </div>
        );
    }
}

我需要在另一个容器组件（Carousel）中使用这个组件，但是我遇到了以下问题：

作为此问题的解决方案，VSCode 告诉我可以导入该组件，但是当我这样做时，我收到以下错误：

TypeError: Class constructor Story cannot be invoked without 'new'

我正在使用 Windows 10。有人发生过吗？我很欣赏你的评论。

Answer 1

我犯了一个初学者的错误。我没有以正确的方式调用组件：

 <Story
    visited={true}
    name='Comida 1'
    image='https://i.pinimg.com/originals/2a/45/af/2a45af7fa0c4347526f90ecc56e5764e.jpg'
 />

我应该这样称呼它。

 <fd-story
    visited={true}
    name='Comida 1'
    image='https://i.pinimg.com/originals/2a/45/af/2a45af7fa0c4347526f90ecc56e5764e.jpg'
 />

我正在调用组件的类，但我需要调用标签名称（fd-story）。我希望别人为它服务。

Answer 2

您需要使用下面代码中的“标签”作为标签名称。

@Component({
    tag: 'fd-story',
    styleUrl: './story.css',
    shadow: true })

所以在这里你应该使用'fd-story'而不是'story'