Создание динамического веб-компонента Unorderlist с использованием stencilJS - PullRequest
Новая
       30

Создание динамического веб-компонента Unorderlist с использованием stencilJS

0 голосов
/ 14 февраля 2019

Использование stenciljs динамически генерирует вложенный неупорядоченный список <ul><li>...</li></ul>, поэтому я и, предоставляя входные данные как Obj={}, получаю некоторые проблемы.Вот мой код ниже. Пожалуйста, помогите мне в этом ... 

1. index.html

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
  <title>Stencil Component Starter</title> 
  <script src="/build/mycomponent.js"></script>

</head>
<body>   
  <list-component list-object='[
  {title: "Point", children: [
      {title: "Point"},
      {title: "Point"},
      {title: "Point"},
      {title: "Point", children: [
          {title: "Point"},
          {title: "Point"},
          {title: "Point"}
      ]}
  ]},
  {title: "Point", children: [
      {title: "Point"},
      {title: "Point", children: [
          {title: "Point"},
          {title: "Point"},
          {title: "Point"}
      ]},
      {title: "Point"}
  ]},
]' > </list-component>  
</body>
</html>

ВЫПУСК : Я передаю вложенный объект в пользовательский веб-компонент.В этом list.tsx файле я сталкиваюсь с проблемой при передаче аргументов в функцию buildList("?","?") ...? 

2. list.tsx

import { Component, Prop, State, Watch, Element } from '@stencil/core';


@Component({
    tag:'list-component',
    styleUrl:'./list-component.css' 
})

export class ListComponent{

    @State() idName: string;   
    @Prop() listObject: string;
    @Element() flashElement: HTMLElement;   

    private ulContent: HTMLElement;

    componentWillLoad() { 
        this.ulContent  = this.flashElement.querySelector('.ul-content');
        this.buildList(this.ulContent,this.listObject);  
    }


    @Watch('listObject') 
    buildList(parentElement, listObject){ 
        console.log(listObject);
        var i, l, list, li, ul1;
        if( !listObject || !listObject.length ) { return; } 
        ul1 = document.createElement('ul');
        list = parentElement.appendChild(ul1);
        for(i = 0, l = listObject.length ; i < l ; i++) {
            li = document.createElement('li');
            li.appendChild(document.createTextNode(listObject[i].title)); 
            list.appendChild(li);
            this.buildList(li, listObject[i].children);
        } 
    } 

    render() {
        return ( 
            <div class="ul-content"></div>
        );
    }
}

1 Ответ

0 голосов
/ 19 февраля 2019

Я вижу две проблемы:

1: Когда Stencil вызывает методы @Watch, он всегда передает новые и старые значения в качестве аргументов, см. https://stenciljs.com/docs/properties#prop-default-values-and-validation. Это означает, что вы не можете определить пользовательские аргументы.Вы можете создать дополнительную функцию, которая будет выполнять функции наблюдателя, а затем вызывать buildList: 

@Watch('listObject')
listObjectChanged() {
    this.buildList(this.ulContent, this.listObject);
}

2: listObject - это строка, поэтому вам нужно JSON.parse ее перед тем, как вы можете зациклить ее (и переписатьэто так, это действительно JSON).Затем сохраните этот проанализированный список в локальной переменной и используйте его для генерации списка.См. https://medium.com/@gilfink/using-complex-objects-arrays-as-props-in-stencil-components-f2d54b093e85

Существует гораздо более простой способ визуализации этого списка с использованием JSX вместо ручного создания элементов списка: 

import { Component, Prop, State, Watch, Element } from '@stencil/core';

@Component({
  tag: 'list-component',
  styleUrl: './list-component.css'
})

export class ListComponent {

  @Element() flashElement: HTMLElement;

  @State() idName: string;
  @Prop() listObject: string;
  @State() list: any[];

  @Watch('listObject')
  listObjectChanged() {
    this.list = JSON.parse(this.listObject);
  }

  componentWillLoad() {
    this.listObjectChanged();
  }

  renderList(list) {
    return list.map(list => <ul>
      <li>{list.title}</li>
      {list.children && this.renderList(list.children)}
    </ul>
    );
  }

  render() {
    return (
      <div class="ul-content">
        {this.renderList(this.list)}
      </div>
    );
  }
}

Надеюсь, это поможет.

...