如何将Object转换为String？拼接li与menu_link出现[object Object]问题

问题原因 #

你碰到的[object Object]是因为link_menu本质是一个React元素对象，不是字符串。当你尝试把JS对象和字符串拼接时，JS会自动调用对象的toString()方法，而默认的对象toString返回值就是[object Object]，这就是输出不符合预期的核心原因。

另外你原来的JSX还有个小细节错误：menuBar[i].menu_title没有用大括号包裹，这样会直接显示这个字符串字面量，而不是变量里的实际标题内容，得改成{menuBar[i].menu_title}才行。

推荐解决方案：用React原生方式构建UI（拒绝字符串拼接） #

React的设计思路就是用JSX直接描述UI结构，完全不需要手动拼接HTML字符串——这种方式不仅容易出问题，还可能带来XSS安全风险。你可以直接把<li>和<NavLink>组合成一个完整的React元素：

// 直接用JSX构建完整的菜单项元素
const menuItem = (
  <li>
    <NavLink 
      to={menuBar.menu_flag_link === 0 ? 'javascript:;' : '/'}
      exact
    >
      {menuBar[i].menu_title} {/* 变量必须用大括号包裹才能被解析 */}
    </NavLink>
  </li>
);

// 之后你可以把这个menuItem放到组件的渲染逻辑里，比如放到数组中批量渲染

特殊场景：确实需要转成HTML字符串 #

如果因为某些特殊需求，你必须把React元素转换成HTML字符串，可以使用ReactDOMServer.renderToString()方法，它能把React元素编译成对应的HTML字符串：

import ReactDOMServer from 'react-dom/server';

let linkMenu;
if (menuBar.menu_flag_link === 0) {
  linkMenu = <NavLink to='javascript:;' exact>{menuBar[i].menu_title}</NavLink>;
} else {
  linkMenu = <NavLink to="/" exact>{menuBar[i].menu_title}</NavLink>;
}

// 将React元素转换为HTML字符串
const linkHtml = ReactDOMServer.renderToString(linkMenu);
// 再拼接<li>标签
const html = `<li>${linkHtml}</li>`;

console.log(html); // 输出：<li><a href="/">Dashboard</a></li>

注意事项 #

• 尽量避免手动拼接HTML字符串，React的JSX已经提供了更安全、更易维护的UI构建方式。
• 所有要插入到JSX中的变量都必须用大括号{}包裹，否则会被当作普通文本处理。

内容的提问来源于stack exchange，提问作者R. Azrial