如何解决JavaScipt:将HTML实体作为函数参数传递
有什么方法可以将HTML
实体作为JavaScript中的函数参数进行传递。
我正在构建一个React应用,我需要将HTML
实体作为prop
从父组件传递到子组件,然后在子组件中显示该实体表示的字符。
例如,请参阅stackblitz here。
在Hello
组件中,我需要将从App组件收到的htmlEntity
打印为prop
并显示该实体表示的字符,在这种情况下,它将是符号-。 / p>
这如何实现?
解决方法
一种方法是在反应中使用dangerouslySetInnerHTML
。
function createMarkup(str) {
return {__html: str};
}
function MyComponent({str}) {
return <div dangerouslySetInnerHTML={createMarkup(str)} />;
}
const myText = 'First · Second';
<MyComponent str={myText} />}
另一种方法是使用带转义符的Unicode字符(例如\ u0057)而不是HTML代码(·)。
function MyComponent({str}) {
return <div>{str}</div>;
}
const myText = 'First \u0057 Second';
<MyComponent str={myText} />
,
import React from "react";
import "./style.css";
export default function App() {
const htmlEntity = <div>÷</div>;
return (
<div>
<Hello htmlEntity={htmlEntity}/>
</div>
);
}
const Hello = ({htmlEntity}) => (
<div>{htmlEntity}</div>
)
像这样实现
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。