StencilJS Реквизит не заполняется в JSX - PullRequest
Новая
       36

StencilJS Реквизит не заполняется в JSX

1 голос
/ 25 октября 2019

Я изучаю и практикую 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>

Код в его текущем виде показывает карту и не выдает никаких ошибок, но не отображает содержимое из реквизита.

Ответы [ 2 ]

3 голосов
/ 29 октября 2019

Ваша проблема в том, что атрибуты в HTML не имеют заглавных букв. Поэтому, когда вы создаете переменные с заглавными буквами, они не будут заглавными в HTML, вместо этого они разделяются символами "-" 

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

. Эти три не являются атрибутами cardImage, linkText1, linkText2в теге HTML вместо этого они:

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>

Обновить

Поскольку тег 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. Когда вы сохраняете его как переменную, вы можете получить доступ к атрибутам тега. Возможно, вам придется использовать другой жизненный цикл, но концепция работает. Кстати, если зависит от выбранного вами крючка.

0 голосов
/ 03 ноября 2019

В итоге проблема была решена путем изменения свойства заголовка, так как это было зарезервированное слово, после того, как я это сделал, он работал как шарм. Я ссылался только на этот тег в JSX другого элемента, поэтому мне не нужно было менять регистр в противном случае (что я сделал бы, если бы вызывал его из index.html)

...