如何在JavaScript中传递HTML实体作为函数参数？React组件传参实现

当然可以在JavaScript（包括React项目里）把HTML实体当作函数或者组件的参数传递啦！不过React默认会自动转义这些实体内容，直接渲染的话会显示©这样的字符串，而不是你想要的版权符号©。针对你说的父组件传prop给子组件然后渲染对应字符的场景，我给你几个实用的解决方案：

方法1：用dangerouslySetInnerHTML解析实体字符串 #

如果你父组件传递的是像'©'这样的HTML实体字符串，可以在子组件里用dangerouslySetInnerHTML来解析并渲染出对应的字符。

举个例子：
父组件（App.js）：

import Hello from './Hello';

function App() {
  return (
    <div className="App">
      <Hello htmlEntity="&copy;" />
    </div>
  );
}

export default App;

子组件（Hello.js）：

function Hello({ htmlEntity }) {
  return (
    <div dangerouslySetInnerHTML={{ __html: htmlEntity }} />
  );
}

export default Hello;

小提醒：这个API名字里的“dangerously”不是吓唬人——如果传递的实体内容来自用户输入这类不可信源，可能会有XSS攻击风险。但如果你的实体是固定的、可信的，用这个方法完全没问题。

方法2：直接传Unicode字符（更安全省心） #

另一种更安全的思路是，直接在父组件里传递实体对应的Unicode字符，子组件可以直接渲染，不用额外处理。

比如©对应的Unicode是\u00A9，或者你直接敲入版权符号©也可以：
父组件（App.js）：

import Hello from './Hello';

function App() {
  return (
    <div className="App">
      <Hello htmlEntity="©" />
      {/* 也可以用Unicode转义序列写法 */}
      {/* <Hello htmlEntity="\u00A9" /> */}
    </div>
  );
}

export default App;

子组件（Hello.js）：

function Hello({ htmlEntity }) {
  return <div>{htmlEntity}</div>;
}

export default Hello;

方法3：自定义解码函数（灵活处理多种实体） #

如果你需要处理大量不同的HTML实体，也可以写个简单的解码函数，把实体字符串转换成对应的字符。比如利用浏览器的DOMParser来做解析：

// 自定义解码函数
function decodeHtmlEntity(entity) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(`<div>${entity}</div>`, 'text/html');
  return doc.querySelector('div').textContent;
}

// 子组件中使用
function Hello({ htmlEntity }) {
  const decodedChar = decodeHtmlEntity(htmlEntity);
  return <div>{decodedChar}</div>;
}

这个方法不用依赖dangerouslySetInnerHTML，还能安全解析各种HTML实体，适合场景更复杂的情况。

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