React开发checklist时特殊字符显示异常及dangerouslySetInnerHTML失效问题

• dangerouslySetInnerHTML用法错误：你将它作为标签文本内容写入<span>的闭合标签内部，而非作为React组件的prop属性传递，导致属性未生效，还直接渲染了这段代码文本，自然看不到正确的列表内容。
• 初始代码混用了AngularJS语法：ng-repeat、checklist-model都是AngularJS专属指令，React环境不识别，这也是checklist功能完全失效的核心原因之一。

方案1：修正特殊字符渲染逻辑（无风险版本，推荐） #

不需要使用dangerouslySetInnerHTML，提前对字符串做HTML实体解码即可解决&显示为amp的问题，通用解码函数如下：

const decodeHtml = (html) => {
  const txt = document.createElement('textarea');
  txt.innerHTML = html;
  return txt.value;
}

渲染时直接调用解码函数即可：

<span className='someClass'>{decodeHtml(item.name)}</span>

方案2：修正dangerouslySetInnerHTML写法（仅适用于item.name来源可信的场景） #

dangerouslySetInnerHTML是React的内置属性，需要写在标签的属性位置，正确写法如下：

<span className='someClass' dangerouslySetInnerHTML={{ __html: item.name }} />

完整React Checklist实现示例 #

React没有内置的checklist双向绑定指令，需要用受控组件逻辑自行实现，完整可运行代码如下：

import { useState } from 'react';

const MyChecklist = () => {
  // 模拟你的列表数据源
  const List = [
    { id: 1, name: '选项1&测试' },
    { id: 2, name: '选项2<测试' },
    { id: 3, name: '选项3>测试' }
  ];
  // 存储选中的项
  const [selectedList, setSelectedList] = useState([]);

  // 选中状态切换逻辑
  const handleCheckChange = (itemName) => {
    setSelectedList(prev => 
      prev.includes(itemName) 
        ? prev.filter(name => name !== itemName)
        : [...prev, itemName]
    );
  };

  return (
    <div>
      {List.map(item => (
        <label key={item.id}>
          <input
            type="checkbox"
            checked={selectedList.includes(item.name)}
            onChange={() => handleCheckChange(item.name)}
          />
          {/* 此处可替换为方案1的解码写法 */}
          <span className='someClass' dangerouslySetInnerHTML={{ __html: item.name }} />
        </label>
      ))}
    </div>
  );
};

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