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

Question

我的 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}它直接但它是无法解码的 encodedURI。

谢谢!

Answer 1

查看 react docs for dangerouslySetInnerHTML .

you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key...

所以没有什么能阻止您从 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 键的对象。你可以把任何东西放在那里。

注意:我认为您可能想要的是这个公开的 feature request 描述的内容.对于您的用例，我认为上述解决方案非常有效。但如果您仍然不满意，请查看链接问题中的讨论。