typescript - StencilJS Prop 未填充在 JSX 中

Question

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

组件代码...

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>

目前的代码显示卡片并且不会抛出任何错误，但不会显示 Prop 的内容。

Answer 1

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

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

这三个都不是cardImage、linkText1、linkText2 属性代替它们是:

卡片图片, 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标签。当您将其保存为变量时，您可以访问标签所具有的属性。也许你必须使用不同的生命周期钩子(Hook)，但这个概念是有效的。顺便说一下，If 取决于您选择的钩子(Hook)。