React字符串转HTML失效，使用html-react-parser遇ESLint报错求助

逐个解决ESLint报错 #

1. 导入语句需移至顶部
   ESLint强制要求所有import语句必须放在文件最顶部，不能嵌套在函数或代码块内。将import parse from 'html-react-parser';移动到App.js的开头，和React相关的导入放在一起。

2. 'string'未定义
   该报错说明你代码中使用了未声明的string变量。检查你的HTML字符串数组，确保所有元素都正确定义，比如：

// 正确声明包含HTML字符串的数组
const htmlStrings = [
  '<div>示例HTML内容1</div>',
  '<p>示例HTML内容2</p>'
];

3. 'arrs_list'和'html'未定义
   这两个变量要么未提前声明，要么声明的作用域不对（比如在组件外部未导出，或在使用之后才声明）。确保在组件内部、使用之前先声明数组，遍历的时候正确引用变量名。

正确代码示例 #

// 所有导入统一放在文件顶部
import React from 'react';
import parse from 'html-react-parser';

function App() {
  // 声明包含HTML字符串的数组
  const arrs_list = [
    '<h2>标题示例</h2>',
    '<div>这是一段带<b>加粗效果</b>的文本</div>',
    '<p>普通段落内容</p>'
  ];

  return (
    <div className="App">
      {/* 遍历数组，用parse转换HTML字符串，必须添加key属性 */}
      {arrs_list.map((html, index) => (
        <div key={index}>{parse(html)}</div>
      ))}
    </div>
  );
}

export default App;

额外注意事项 #

• 遍历数组渲染元素时，必须添加key属性，这是React的要求，同时也能避免ESLint警告。
• 如果你使用Create React App，默认的ESLint规则比较严格，确保所有变量都有明确声明，避免使用未定义的变量。
• 若确实需要动态导入（极少场景），可以在项目的ESLint配置中禁用import/first规则，但优先推荐将导入语句放在顶部，符合代码规范。

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