时间戳

首页 > 解决方案 > 使用 stencilJS 生成动态 Unorderlist Web 组件

stenciljs - 使用 stencilJS 生成动态 Unorderlist Web 组件

问题描述

使用 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>

问题：我将嵌套对象传递给自定义 Web 组件。在这个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>
        );
    }
}

标签： stenciljs

解决方案

我看到两个问题：

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>
    );
  }
}

希望这可以帮助。

推荐阅读