使用模板动态生成嵌套无序<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>
);
}
}
我看到两个问题：
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>
);
}
}
希望这有帮助。