如何在沒有包裝器 div 的情況下使用危險的SetInnerHTML？

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}它，但它是無法解碼的編碼URI。

謝謝！

Answer 1

查看危險地SetInnerHTML的react 文檔。

你可以直接從 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鍵的對象。 你可以在里面放任何東西。

注意：我認為您可能會在此開放功能請求中描述。 對於您的用例，我認為上述解決方案非常有效。 但是，如果您仍然不滿意，請查看鏈接問題中的討論。

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 在片段上支持危險的SetInnerHTML。