React自定义npm包渲染Header时HTML标签直接显示的解决方法

问题核心：你的Header组件返回的是字符串形式的HTML代码，React会将其当作普通文本渲染，不会解析为DOM元素。要正确渲染标题，无需使用dangerouslySetInnerHTML，只需让组件返回JSX元素即可。

修改步骤 #

1. 更新header.jsx #

将返回字符串的代码改为返回JSX元素：

// header.jsx
export default function Header() {
  // 直接返回JSX，而非字符串
  return <h1>Head</h1>;
}

2. 确保index.js正确导出组件 #

// index.js
import Header from './header.jsx';
export default Header;

3. 配置package.json #

确保包的入口和依赖配置正确，让React项目能正常识别和引入组件：

{
  "name": "fmg_test_header",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0"
  }
}

原理说明 #

React组件的返回值需要是React元素（JSX编译后会转换为React.createElement()的调用结果），而非字符串。当你返回字符串时，React会创建一个文本节点来展示它；返回JSX时，React会将其转换为对应的DOM节点，从而正确渲染出<h1>标题。

这种方式完全符合React的安全渲染机制，不需要使用dangerouslySetInnerHTML这类有XSS风险的API。

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