在本步骤结束时，你将根据组件内部的一些响应式状态，从 words 属性中渲染单个单词。

内部响应式状态指的是不属于组件公开 API 的响应式属性，因此没有关联的 HTML 属性。

定义 idx，一个用于跟踪当前显示哪个单词的内部状态属性。

// word-viewer.ts
class WordViewer extends LitElement {
  @state() private idx = 0;
  ...
}

// word-viewer.js
  static properties = {
    idx: {state: true},
    ...
  };

  constructor() {
    ...
    this.idx = 0;
  }

然后在 render 方法中，按 '.' 分隔符拆分单词，并显示数组索引为 idx % splitWords.length 处的单词。% 运算符会确保结果索引始终在 splitWords 数组的范围内。

// word-viewer.ts

  render() {
    const splitWords = this.words.split('.');
    const word = splitWords[this.idx % splitWords.length];
    return html`<pre>${word}</pre>`;
  }

// word-viewer.js

  render() {
    const splitWords = this.words.split('.');
    const word = splitWords[this.idx % splitWords.length];
    return html`<pre>${word}</pre>`;
  }

预览应该显示 👋。