javascript - 在 React 中为 HTML 标签生成随机类名的问题

Question

大家好!
这可能是一个愚蠢的问题，但我无法弄清楚为什么 console.log 中的 className 变量的值与 <p> 的 className 属性中使用的值不同。 .
我正在尝试为 HTML 标签生成随机类名，这样我就可以创建带有这些 HTML 标签规则的 CSSStyleSheets。因为，在这个例子中，css prop 是一样的，样式是一样的，但是标签和 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>
  );
}

它也在这里 codesandbox
提前致谢 :)

Answer 1

代码沙箱似乎太慢了，无法用 console.log 捕获它，但是如果您在 console.count 中设置了调试器(或 Pa)组件你会看到你得到了 2 个渲染，这意味着你得到了两个不同的随机类名。我猜它会记录第一个，然后使用第二个。