如何在没有包装div的情况下使用dangerouslySetInnerHTML

Question

我的HTML内容来自API(本例中为盖茨比(，因此我按照建议使用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}，但它是encodedURI，无法解码。

谢谢！

Answer 1

查看dangerouslySetInnerHTML的react文档。

您可以直接从React设置HTML，但您必须键入dangerouslySetInnerHTML并传递带有__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键的对象。你可以在里面放任何东西。

注意：我想你可能会在这个开放功能请求中描述。对于您的用例，我认为上述解决方案非常有效。但如果你仍然不满意，请查看相关问题中的讨论。

Answer 2

您也可以这样做：

/**
* 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在片段上支持dangerouslySetInnerHTML。