在 Tailwind CSS 中，如何在 ReactJS 中使用危险的 SetInnerHTML 来设置元素样式？

Question

代码：

function App() {
  const html = '<p>Some text <br/><span>Some text</span></p>';

  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

export default App;

我想使用 Tailwind CSS 为

<span>

元素设置样式。我该怎么做？

Answer 1

Tailwind 通常需要在您希望应用样式的元素上设置类。这不是一个好的模式，但您可以使用任意变体和子选择器。

例如：

const App = () => {
  const html = '<p>Some text <br/><span>Some text</span>';

  return (
    <div
      dangerouslySetInnerHTML={{__html: html}}
      className="[&>p>span]:text-lg"
    />
  );
}

其他选项可能包括：

• 定义一个“普通”css 类，将其附加到包装器并在类内设置 span 的样式：

   // index.css
   .wrapper span { 
       color: red;
   }
  
   // react component
   import './index.css';
   ...
   const App = () => {
     const html = '<p>Some text <br/><span>Some text</span>';
  
     return (
       <div
         dangerouslySetInnerHTML={{__html: html}}
         className="wrapper"
       />
     );
   }
  

• 避免使用危险的SetInnerHTML，找到另一种方法来完全解决这个问题（如果可能的话）

• 使用 html 解析器（或 DOM）并改变字符串并重新呈现为字符串，或者从结果中呈现反应组件。这是在 vanilla javascript 中的内容（脱离了 react 的上下文）：

   const div = document.createElement('div')
   div.innerHTML = '<p>Some text <br/><span>Some text</span>'
   div.querySelectorAll('span').forEach(span => span.classList.add('text-lg'))
   console.log(div.innerHTML) // <p>Some text <br><span class="text-lg">Some text</span></p>
  

Answer 2

如果你想在所有 span 元素上设置相同的样式，你可以在 span 上使用 string.replaceAll 方法，像这样：

 const html = '<p>Some text <br/><span>Some text</span>';
html.replaceAll('<span', '<span className='text-lg')

Answer 3

更简单的解决方案可能是使用以下内容：

function App() {
  const html = '<p>Some text <br/><span class="text-lg">Some text</span></p>';

  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

export default App;

小点数：

• 在字符串中，确保使用

  class

  而不是

  className

  ；否则，它不会像

  it is HTML and not JSX

  .
• 如果您从其他文件加载 HTML 字符串，例如

  data.json

  ，请确保将其包含在 content 的 tailwind.config.js 设置中。