在 React 中為 HTML 標簽生成隨機類名的問題

Question

大家好！

這可能是一個愚蠢的問題，但我無法弄清楚為什么 console.log 中的 className 變量與<p>的 className 屬性中使用的值不同。

我正在嘗試為 HTML 標簽生成隨機 class 名稱，這樣我就可以使用這些 HTML 標簽的規則創建 CSSStyleSheets。 因為在這個例子中，css 屬性是一樣的，所以樣式是一樣的，但是標簽和 console.log 中的 className 變量是不同的，這就是我不明白的原因。

我是否遺漏了一些明顯的東西，或者這是某種預期的行為？

代碼是這樣的：

import React from 'react'

const constructCss = (css) => {
  const style = document.createElement('style')
  document.head.appendChild(style)
  style.appendChild(document.createTextNode(css))
}

const constructCssStyleAndReturnClassName = (css) => {
  const generateRandomString = (length=6) => Math.random().toString(20).substr(2, length)
  const className = `styled-${generateRandomString(8)}`
  constructCss(`.${className} ${css}`)
  return className
}

const Pa = ({css, children}) => {
  const className = constructCssStyleAndReturnClassName(css)
  console.log('Rendering with className: ', className)
  return <p className={className}>{children}</p>
}

export default function App() {
  return (
    <div className="App">
      <Pa css={`{ background-color: blue; color: white }`}>Helloooooo</Pa>
    </div>
  );
}

它也在代碼沙盒中

提前致謝：）

Answer 1

代碼沙箱似乎太慢了，無法使用console.log捕獲它，但如果您在Pa組件中設置調試器（或console.count ），您將看到您獲得 2 個渲染，這意味着您獲得兩個不同的隨機 class 名稱。 我猜它會記錄第一個，然后使用第二個。