javascript - 基于端点响应的es6模板字符串渲染元素

Question

我对 ES6 和模板文字等相当陌生......并且希望得到一些建议。我有一个端点，它为我提供了一组对象，我用它们来显示某些学生信息。在每个对象中，学生都有一个星级。长话短说，我想获取从端点返回的评级编号并循环显示它们的星级评级(1-5 颗星)。我的端点和一切工作正常，但我在从 for 循环输出 html 方面遇到困难。任何建议和/或提示将不胜感激。

我的 es6 文件包含以下内容:

renderStudentRating = (studentRating) => {
  let rating = studentRating;

  for (let i = 0; i <= rating; i ++) {
    // should output an element based on rating count 
    <i class="student-star"></i>
  }
};

<span class="student-rating-info">
  <div id="rating">
    ${renderStudentRating(`${student.rating}`)}
  </div>
</span>

Answer 1

这样的事情会创建一个具有适当数量的星星的跨度。

renderStudentRating = studentRating => {
  let output = '';
  for (let i = 0; i <= studentRating; i ++) {
    // should output an element based on rating count 
    output += '<i class="student-star"></i>';
  }
  return output;
};
document.querySelector('.student-rating-container').innerHtml = `
    <span class="student-rating-info">
        <div id="rating">
            ${renderStudentRating(student.rating)}
        </div>
    </span>
`;