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>
`;

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

1 个答案: