我创建香草的JavaScript日历,使用ES6功能。
我有一个神奇的功能的createElement通过调用类的渲染方法,然后解析字符串节点单元。
现在,我已经创建了一天组件和行组件。
我导入日行里面,我需要做的是显示日历行这几天里面,所以在总应该显示4-5rows,用28-31天被行内分。
事情是这样的:
renderDays() {
// Weeks
for(var j = 0; j < 5; j++) {
const row = day % 7 == 0;
var html
html += ' ${row ? "<div class="cal__cell-row">" : " "} ';
// Days
for (var i = 0; i < 28; i++) {
createElement(day);
}
html += ' ${row ? "</div>" : " "} '
}
}
然后在我的渲染我有
render() {
return /*html*/`
<div data-child="row" class="cal__cell-row">
${this.renderDays()}
</div>
`;
}
我怎样才能使这项工作?在ES5将它只是其附加或添加一个变量,但如何把这个这种方式下产生的呢?
要使用模板文字,你必须使用反单引号``(以下Esc键的一个)
您正在使用引号和你所期望的不采取${}
。
如果你想跟着ES6做法在问题中提到你也可以使用let
代替var
的。
renderDays() {
let html = ''; // consider scoping the variables correctly
// Weeks
for(let j = 0; j < 5; j++) {
const row = day % 7 == 0;
html += ` ${row ? '<div class="cal__cell-row">' : ' '} `;
// Days --- potentially incorrect logic as you are looping inside each row 28 times, or 5*28 times in total ?
for (let i = 0; i < 28; i++) {
createElement(day); // possibly you mean html+= createElement(day) ?
}
html += ` ${row ? '</div>' : ' '} `
}
// console.log(html)
return html;
}