React JS中如何渲染state内的HTML元素？渲染异常求解

嘿，我来帮你搞定这个React里的渲染问题！咱们先拆解你遇到的两个核心痛点：dangerouslySetInnerHTML没生效，还有莫名其妙的[object Object]输出，一步步来解决：

1. 先搞定[object Object]的问题 #

你看到的[object Object]，本质是你把一个JavaScript对象直接拼进字符串里了（比如写了'<li>' + someObject + '</li>'），JS会自动把对象转成这个默认的占位字符串。解决方式很简单：

• 如果只是要展示对象的完整内容，用JSON.stringify(someObject)把它转成可读的JSON格式字符串；
• 如果对象里有特定的文本属性（比如label、text），直接提取属性值就行：someObject.label。

2. 正确使用dangerouslySetInnerHTML #

你之前的代码没生效，大概率是HTML字符串的结构和渲染位置不匹配：

• 如果你已经在JSX里写了<li>标签，就别把整个<li>[...]</li>塞进去，否则会嵌套<li>，最终React会把字符串转义成纯文本显示；
• 正确的做法是：只把<li>内部的内容存在state里，然后给<li>本身加上dangerouslySetInnerHTML。

举个能跑的例子：

class Sidebar extends React.Component {
  constructor(props) {
    super(props);
    // 先处理对象，转成可读内容
    const menuContent = JSON.stringify({ name: "首页", path: "/home" });
    this.state = {
      // 只存li内部的内容，不是整个li标签
      sidebarContent: menuContent
    };
  }

  render() {
    return (
      <ul className="sidebar-menu">
        {/* 给li设置dangerouslySetInnerHTML，传入内部内容 */}
        <li dangerouslySetInnerHTML={{ __html: this.state.sidebarContent }} />
      </ul>
    );
  }
}

3. 更安全的替代方案：用数据驱动渲染（强烈推荐！） #

dangerouslySetInnerHTML带个“dangerously”可不是闹着玩的——它有XSS攻击的风险，能不用就不用。更好的方式是在state里存原始数据，而非HTML字符串，然后在render里用JSX直接生成元素：

class Sidebar extends React.Component {
  constructor(props) {
    super(props);
    // 存原始数据数组
    this.state = {
      sidebarItems: [
        { id: 1, text: "首页", path: "/" },
        { id: 2, text: "我的", path: "/profile" }
      ]
    };
  }

  render() {
    return (
      <ul className="sidebar-menu">
        {/* 用map遍历数据生成li，完全不用dangerouslySetInnerHTML */}
        {this.state.sidebarItems.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

为什么你原来的代码没生效？ #

你之前把'<li>[object Object]</li>'存在state里，不管是直接渲染还是在<li>内部用dangerouslySetInnerHTML，React都会把整个字符串转义成<li>[object Object]</li>，所以页面上显示的就是纯文本，而不是实际的<li>元素。

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