改进了使用模板字符串和arr.Reduce()渲染的导航列表的语法

Question

我正在尝试ES6中的一些最新功能，以便处理框架。现在，我正在建立一个导航菜单。这是我为渲染模板所拥有的。

// Prepare navigation container
var navMenuEl = document.createElement('div');
navMenuEl.id = 'lesson-navigation';
navMenuEl.className = 'menu side';
// Navigation options
let navItems = `
    <div class="link">
        <a href="/index.html">Home</a>
        <div class="label">View all lessons</div>
    </div>
    ${ links.reduce((t, link) => t + `
        <div class="link ${link.active === true ? 'active' : '' }">
            <a href="${link.url}">${link.title}</a>
            <div class="label">${link.description}</div>
        </div>
    `, '')}
`;
debug('Nav items:', navItems)
// Add navigation options
navMenuEl.innerHTML = navItems;

由于ES6，这是一件很棒的代码，但我想知道是否有更好的方法来编写减少功能。我在JS上有很多经验，但我觉得新来者可能会因语法而迷失方向。

添加.active类的问题相同。我可以有一个util方法isActive(link)，但也许有更好的东西？例如，我可以为链接项目使用专用的Web组件或渲染功能。但是说我不想在这里额外的组件。

欢呼！

Answer 1

我不知道它是否更可读，但是您可以用数组＃映射替换数组＃redus，然后将数组＃加入项目。另外，您可以将单独的变量用于链接，然后将它们添加到navItems。

您可以编写.active逻辑，而无需均等和true，然后缩短一点：

link.active ? 'active' : ''

最终结果：

const linkItems = links.map((link) => `
    <div class="link ${link.active ? 'active' : ''}">
        <a href="${link.url}">${link.title}</a>
        <div class="label">${link.description}</div>
    </div>
`);
const navItems = `
    <div class="link">
        <a href="/index.html">Home</a>
        <div class="label">${link.description}</div>
    </div>
    ${ linkItems.join('') }
`;