给字符串组成的变量添加属性答案

【问题标题】：Adding a property to a variable composed by a string给字符串组成的变量添加属性
【发布时间】：2023-01-24 00:53:54
【问题描述】：

考虑一个对象：

export const sidebarConfig: {
      header: 'Content',
      links: [
        { route: '/medialibrary', label: 'Media library', isBeta: true },
        { route: '/#content/suggested/topics', label: 'Suggestions' },
        { route: '/#content/feeds', label: 'RSS feeds' },
        { route: '/#content', label: 'My content' },
      ],
};

以及具有这些属性的侧边栏 React 组件：

return (
    <Sidebar
      activeIndex={activeIndex}
      header={sidebarConfig.header}
      onNavClick={(route) => publish(EVENTS.CHANGE_PAGE, route)}
      options={sidebarConfig.links}
    />
  );

呈现以下 HTML 以创建选项列表：

<ul>
{options.map((option, index) => (
    <li
      key={generateId()}
      data-testid={XXXX}
      className={`${index === activeIndex ? 'active' : ''} ${index === options.length - 1 ? 'last' : ''}`}
      title=""
    >}
</ul>

使用 JS 和 .map() 并且不修改 sidebarConfig 将 testId 属性添加到每个 sidebarConfig.link，由字符串 ${label}-sidebar-option 组成，然后将它们传递给 data-testid

【问题讨论】：

标签： javascript html reactjs properties

【解决方案1】：

data-testid={`${option.label}-sidebar-option`}

【讨论】：

谢谢回复。然后我将如何向每个 siderbarConfig.link 添加一个 testId 属性？根据我的同事还需要使用 .map()
@thejavarookie 这应该放在您问题中显示的map 中以替换XXXX。
请删除java 标签。
谢谢。我还删除了 java 标签。