Question

我想生成具有两个功能的HTML代码作为培训练习。第一个功能创建一个单独的列表项。第二个函数将一个带有实际项目的数组作为输入并创建列表，如下所示：

功能1：

const listItem = item => `<li class="list-item">${item}</li>`;

功能2：

const unorderedList = items => `<ul class="list">\n ${items.forEach((item) => { listItem(item); })}\n </ul>`;

结果应该是这样的：

<ul class="list">
  <li class="list-item">car</li>
  <li class="list-item">bike</li>
  <li class="list-item">train</li>
</ul>

但是我的代码返回

<ul class="list">
 undefined
</ul>

有人可以向我解释我在做什么错吗？

Answer 1

您需要使用.map将每个item转换成listItem的结果，然后加入：

const listItem = item => `<li class="list-item">${item}</li>`;
const unorderedList = items => `<ul class="list">\n
  ${items.map(listItem).join('')}\n
  </ul>`;

console.log(
  unorderedList(['car', 'bike', 'train'])
);

如果要在每个<li>之间使用换行符，请使用换行符代替空字符串（尽管它不会影响呈现的<ul>）：

const listItem = item => `<li class="list-item">${item}</li>`;
const unorderedList = items => `<ul class="list">\n
  ${items.map(listItem).join('\n')}\n
  </ul>`;

console.log(
  unorderedList(['car', 'bike', 'train'])
);

循环中的模板文字重新定义未定义

1 个答案: