将字符串转换为无序列表

Question

对于一个随机实验，我试图使用 Stencil 建立一个购物清单。我的输入将是一个字符串，即。 "cauliflower, cucumber" 含有购物清单上的成分。我希望将此字符串转换为无序列表。

把字符串转成数组没问题。从数组到列表，我尝试使用 for 循环，遍历数组中的所有选项并将它们添加到列表中。

export class ShoppingList {

  @Prop() veggies: string;

private makeList(typeString: string): HTMLUListElement {
    var listArray: string[] = typeString.split(',');
    for(var i=0; i<listArray.length; i++) {
      // Create the list element:
      var list = document.createElement('ul');

      // Create the list item:
      var item = document.createElement('li');

      // Set its contents:
      item.appendChild(document.createTextNode(listArray[i]));

      // Add it to the list:
      list.appendChild(item);
    }

    return list;
  }

  private getVeggies(): HTMLUListElement {
    return this.makeList(this.veggies);
  }

render() {
    return (
      <div>
        veggies: 
        <ul>{this.getVeggies()}</ul>
      </div>
    );
  }
}

index.html 文件通过以下行运行此代码： <shopping-list veggies="Cauliflower, cucumber" ></shopping-list>

我期望输出 veggies: * cauliflower \n *cucumber。相反，我只是得到一个空列表 veggies: 。检查元素时，我得到以下 HTML 输出：

<div>veggies:<ul><undefined></undefined> </ul><br></div>

Answer 1

您正在混合 DOM 个节点和 VDOM nodes。使用 VDOM 您可以删除手动创建 DOM 节点的代码：

export class ShoppingList {

  @Prop() veggies: string;

  private makeList(typeString: string): HTMLUListElement {
    var listArray: string[] = typeString.split(',');

    return (
      <ul>
            {listArray.map((item) => <li>{item}</li>)}
      </ul>
    );

  private getVeggies(): HTMLUListElement {
    return this.makeList(this.veggies);
  }

  render() {
    return (
      <div>
        veggies: 
        {this.getVeggies()}
      </div>
    );
  }
}

首先，我更改了 makeList，因此它 returns VDOM 和 loop over the items 使用 map 而不是 for 循环.我还从 render() 方法中删除了 <ul>，因为 makeList 已经 returns 它了。

将字符串转换为无序列表

Converting string to unordered list

html-lists

stenciljs