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

Question

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

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

例子请参考stackblitz here.

在 Hello 组件中，我需要打印从 App 组件收到的 htmlEntity 作为 prop 并显示该实体表示的字符，在这种情况下它将是符号 - '' .

如何实现？

Answer 1

一种方法是在 React 中使用 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>
)

这样实现

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

JavaScipt: Pass HTML entities as function parameter

javascript

html-entities

reactjs