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

Question

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

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

例如，请参考此处的stackblitz 。

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

如何实现？

Answer 1

一种方法是在反应中使用dangerouslySetInnerHTML。

function createMarkup(str) {

  return {__html: str};

}

function MyComponent({str}) {

  return <div dangerouslySetInnerHTML={createMarkup(str)} />;

}

const myText = 'First &middot; Second';

<MyComponent str={myText} />}

另一种方法是使用带有转义符号的 Unicode 字符（例如 \u0057）而不是 HTML 代码 (·)。

function MyComponent({str}) {

  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() {

 const htmlEntity = <div>&#247;</div>;

 return (

  <div>

   <Hello htmlEntity={htmlEntity}/>

  </div>

 );

}

const Hello = ({htmlEntity}) => (

 <div>{htmlEntity}</div>

)

像这样实现