gpt4 book ai didi

javascript - 在 dangerouslySetInnerHTML 中传递 react 组件

转载 作者:行者123 更新时间:2023-12-04 15:57:53 27 4
gpt4 key购买 nike

服务器返回如下内容:

内容 = <p> Hello world :smile: <strong> NICE </strong> !</p> - 这是因为我们支持 Markdown 。

现在我有了一个解析器,可以用 :{text}: 解析所有内容变成表情符号。我正在使用 emoji-mart对于这个。

现在内容是这样的:

<p> Hello world ${<Emoji emoji=":smile:" />} <strong> NICE </strong> !</p>

目前没有表情符号解析器,我们所做的是:

return React.createElement('div', { 
dangerouslySetInnerHTML: {
__html: content,
}
});

但是,由于我们现在连接 content包含来自 emoji-mart 的表情符号我如何将其传递给 dangerouslySetInnerHTML不打破 Markdown ?

最佳答案

在尝试这种情况后,我发现您实际上可以传递使用功能组件并返回字符串: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:

(在你的 React 组件中渲染函数)

render() {
const props = {
dangerouslySetInnerHTML: {
__html: testComponent(this.props.content),
},
};

return React.createElement('div', props);

这更 hackier,但比使用更便宜:

renderToString()
renderToStaticMarkup()

关于javascript - 在 dangerouslySetInnerHTML 中传递 react 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51186102/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com