[英]How to use dangerouslySetInnerHTML without the wrapper div?
我的 HTML 内容来自 API(在本例中为 Gatsby),因此我按照建议使用了dangerouslySetInnerHTML
。 问题是,它扰乱了我的样式,特别是网格。 我有一个这样的 html 标记:
<article> <h2>Title of the post<h2> <small>Date of the post</small> <div dangerouslySetInnerHTML={{ __html: post.html }} /> </article>
这个<article>
标签包含一个display: grid
样式。 但是该 div 中的所有内容都占用了宝贵的空间,因此难以设置样式(这也不是一个有用的 div!)。 所有重要的 html 都在里面,但我想去掉实际的<div>
标签。 有什么办法吗?
注意:我已经尝试直接{post.html}
它,但它是无法解码的编码URI。
谢谢!
你可以直接从 React 设置 HTML,但是你必须危险地输入 SetInnerHTML 并传递一个带有 __html 键的对象......
因此,没有什么可以阻止您从 graphql 查询的不同部分形成自己的 html 字符串,如下所示:
const createFullPostMarkup = () => {
return { __html: `<h2>Title of the post</h2><small>Date of the post</small>${ post.html }` }
}
然后将其设置为您文章中的内部 html,如下所示:
<article dangerouslySetInnerHTML={createFullPostMarkup()} />
请记住,这只是一个带有__html
键的对象。 你可以在里面放任何东西。
注意:我认为您可能会在此开放功能请求中描述。 对于您的用例,我认为上述解决方案非常有效。 但是,如果您仍然不满意,请查看链接问题中的讨论。
你也可以这样做:
/**
* Load CSS file in parallel vs a blocking <link /> tag
*
* @param {string} fontUrl The raw font URL
*/
const LoadCSSFile = ({ fontUrl }) => {
// hilariously bad hack to get around React's forced wrapper for dangerouslySetInnerHTML
// @see https://github.com/facebook/react/issues/12014#issuecomment-434534770
let linkStr = '</style>';
linkStr += `<link rel="preload" href="${fontUrl}" as="style" onload="this.rel='stylesheet'" />`;
linkStr += `<noscript><link rel="stylesheet" href="${fontUrl}"></noscript>`;
linkStr += '<style>';
return <style dangerouslySetInnerHTML={{ __html: linkStr }} />;
};
这将输出为:
<style></style>
<link ... />
<noscript><link ... /></noscript>
<style></style>
绝对不是最优雅的解决方案,但它应该可以满足您的需求,直到 React 在片段上支持危险的SetInnerHTML。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.