[英]How to Render a react component inside a dangerouslySetInnerHTML content?
[英]Pass react component inside dangerouslySetInnerHTML
服务器返回如下内容:
content = <p> Hello world :smile: <strong> NICE </strong> !</p>
-这是因为我们支持降价促销。
现在,我有了一个解析器,可以使用:{text}:
将所有内容解析为一个表情符号。 我正在为此使用emoji-mart
。
因此,现在的内容如下所示:
<p> Hello world ${<Emoji emoji=":smile:" />} <strong> NICE </strong> !</p>
当前没有表情符号解析器,我们要做的是:
return React.createElement('div', {
dangerouslySetInnerHTML: {
__html: content,
}
});
但是,由于我们现在将content
串联起来以包含来自emoji-mart
的Emoji,我如何在不破坏markdown的情况下将其传递给dangerouslySetInnerHTML
SetInnerHTML?
在这种情况下,您应该使用React.renderToStaticMarkup(JSXInstance)
:
<p> Hello world ${React.renderToStaticMarkup(<Emoji emoji=":smile:" />)} <strong> NICE </strong> !</p>
在解决这种情况后,我发现您实际上可以传递使用功能的组件并改为返回字符串: https : //github.com/missive/emoji-mart#using-with-dangerouslysetinnerhtml (特定于我有关emoji-mart
问题)
因此,我对其他组件所做的操作是相同的,而不是调用React组件,而是创建了一个函数:
function testComponent(props) {
const { style, className, children, html } = props;
if (html) {
return `<span style='${style}' class='${className}'>${children || ''}</span>`;
}
return (
<span style="${style}" class="${className}">
${children || ''}
</span>
);
}
并将其称为:
function testComponent(props) {
const { content } = props; // content is a markdown and can be a stringified image tag
return testComponent({ children: content, html: true });
}
对于dangerouslySetInnerHTML
:
(反应组件内部的渲染功能)
render() {
const props = {
dangerouslySetInnerHTML: {
__html: testComponent(this.props.content),
},
};
return React.createElement('div', props);
}
这更骇人,但比使用以下工具便宜:
renderToString()
renderToStaticMarkup()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.