在数据映射中嵌入HTML元素出现[object Object]问题求助

出现[object Object]是因为组件对data字段的渲染逻辑和你传入的内容类型不匹配，以下是两种常见场景的解决方法：

1. React/JSX框架场景 #

如果使用React或类似支持JSX的框架，直接返回JSX元素而非HTML字符串：

newDataRows(
  dataToBeMapped.map((m) => ({
    id: m.id,
    data: (
      <>
        <span>Bold Me:</span>
        {m.oldData}
      </>
    )
  }))
);

如果允许用单个span包裹内容，也可以简化为：

data: <span>Bold Me:{m.oldData}</span>

2. 原生JS/支持innerHTML的组件场景 #

如果是原生JS操作DOM，或者组件支持直接解析HTML字符串，需要确保通过innerHTML（或组件对应配置）渲染HTML：

// 原生JS示例
dataToBeMapped.forEach(m => {
  const cell = document.createElement('td');
  cell.innerHTML = `<span>Bold Me:</span>${m.oldData}`;
  // 将cell添加到对应表格行中
});

若使用第三方UI库，需查看组件文档，开启HTML渲染配置（比如部分表格组件支持在列配置中设置dangerouslySetInnerHTML或renderHtml: true）。

内容的提问来源于stack exchange，提问作者aiox