时间戳

首页 > 解决方案 > 如何在没有包装器 div 的情况下使用 dangerouslySetInnerHTML？

reactjs - 如何在没有包装器 div 的情况下使用 dangerouslySetInnerHTML？

问题描述

我的 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，无法解码。

谢谢！

标签： reactjsgatsby

解决方案

查看危险的SetInnerHTML 的反应文档。

你可以直接从 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键的对象。你可以在里面放任何东西。

注意：此开放功能请求描述了我认为您可能追求的内容。对于您的用例，我认为上述解决方案非常有效。但是，如果您仍然不满意，请查看链接问题中的讨论。

推荐阅读