StencilJS 道具未填充在 JSX 中

Question

我一直在学习和练习 Stencil JS，并且正在创建一个卡片组件。我有几个用于填充卡片内容的道具。虽然卡片及其样式在我呈现页面时显示正常，但卡片现在确实显示了我通过的任何道具。

组件代码...

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

@Component({
  tag: 'proj-slider',
  styleUrl: 'proj-slider.css',
  shadow: true
})
export class ProjSlider {

    @Prop() cardImage: string;
    @Prop() title: string;
    @Prop() link1: string;
    @Prop() linkText1: string;
    @Prop() link2: string;
    @Prop() linkText2: string;


  render() {
    return (
        <div class="maincont">

              <div class="maintext">
                   <img src={this.cardImage}/><br/>
                   {this.title}
              </div>

              <div class="linkbox">

                   <div class="link"><a href={this.link1}>{this.linkText1}</a>
                   </div>
                   <div class="link"><a href={this.link2}>{this.linkText1}</a>
                   </div>

              </div>
        </div>

    );
  }

}

在另一个组件的 JSX 中调用该组件。

<proj-slider cardImage="https://i.imgur.com/NPV7bmk.png" title="Calculator" link1="alexmercedcoder.com" linkText1="git"
          link2="alexmercedcoder.com" linkText2="live"></proj-slider>

目前的代码显示了卡片，没有抛出任何错误，但没有显示道具中的内容。

Answer 1

您的问题是 HTML 中的属性没有大写字母。所以当你用大写字母做 prop 变量时，它们在 HTML 中不会是大写的，而是用“-”分隔的

@Prop() cardImage: string;
@Prop() linkText1: string;
@Prop() linkText2: string;

这三个都不是 HTML 标签中的 cardImage、linkText1、linkText2 属性改为：

card-image、link-text1、link-text2

因此您的标签将是：

<proj-slider card-image="https://i.imgur.com/NPV7bmk.png" title="Calculator" link1="alexmercedcoder.com" link-text1="git"
          link2="alexmercedcoder.com" link-text2="live"></proj-slider>

Update

由于 title 标签导致了错误，我想在这里添加一个示例，您如何实际使用 title 标签：

import { ..., Host } from '@stencil/core';

@Prop({reflect:true, mutable: true}) title:string;
private hostElement: HTMLElement;

render() {
    return (
      <Host ref={(el) => this.hostElement = el as HTMLElement}>
      YOUR HTML LIKE IT WAS BEFORE
      </Host>
    )
  }

componentDidUpdate(){
 if(this.hostElement)
   this.title = this.hostElement.getAttribute("title");
}

Host 标签就像是后来渲染的 proj-slider 标签。当您将其保存为变量时，您可以访问标签所具有的属性。也许你必须使用不同的生命周期钩子，但这个概念是有效的。顺便说一句，如果取决于你选择的钩子。

Answer 2

最终解决问题的方法是更改标题属性，因为那是保留字，在我这样做之后它就像一个魅力。我只在另一个元素的 JSX 中引用了这个标签，所以我不需要更改外壳（如果我从 index.html 调用它，我会这样做）

StencilJS 道具未填充在 JSX 中

StencilJS Props not populating in JSX

jsx

typescript

stenciljs