JavaScipt：将 HTML 实体作为函数参数传递

Question

有什么方法可以HTML在 JavaScript 中将实体作为函数参数传递。

我正在构建一个 React 应用程序，我需要将HTML实体从父组件传递到子组件prop，然后在子组件中显示该实体表示的字符。

例如，请参考此处的stackblitz 。

在Hello组件中，我需要将从htmlEntityApp 组件接收到的内容打印为 aprop并显示该实体表示的字符，在本例中为符号 - ''。

如何实现？

Answer 1

一种方法是在反应中使用dangerouslySetInnerHTML。function createMarkup(str) {&nbsp; return {__html: str};}function MyComponent({str}) {&nbsp; return <div dangerouslySetInnerHTML={createMarkup(str)} />;}const myText = 'First &middot; Second';<MyComponent str={myText} />}另一种方法是使用带有转义符号的 Unicode 字符（例如 \u0057）而不是 HTML 代码 (·)。function MyComponent({str}) {&nbsp; return <div>{str}</div>;}const myText = 'First \u0057 Second';<MyComponent str={myText} />

Answer 2

import React from "react";import "./style.css";export default function App() {&nbsp;const htmlEntity = <div>&#247;</div>;&nbsp;return (&nbsp; <div>&nbsp; &nbsp;<Hello htmlEntity={htmlEntity}/>&nbsp; </div>&nbsp;);}const Hello = ({htmlEntity}) => (&nbsp;<div>{htmlEntity}</div>)像这样实现