React 组件未对 TailwindCSS 类名“做出反应”

Question

我目前正在尝试创建一个简单的 React 应用程序，该应用程序使用从 Open Notify 的 ISS API 检索的数据在平面地图上跟踪并显示 ISS（国际空间站）的（粗略）位置。我对开发相当陌生，所以我不太熟悉我正在处理的内容，但在我看来，除了最后一步之外，几乎所有事情都在工作。问题是我的 React 组件忽略了其类名中定义的绝对定位。

我有一个父组件 Map.jsx，它使用 axios 从 API 获取数据，并使用此数据（通过 prop 传递）渲染子组件 ISS.jsx。然后 ISS.jsx 获取此数据并“计算”其呈现的图像的正确类名 (cName)（其中图像是表示 ISS 位置的红点）。基本上它会进行一些数学计算来确定图像绝对定位的像素数量。我 99.999% 确信这个过程正确完成，因为在最终 return 语句之前运行 console.log(cName) 每次都会产生正确的类名（当我手动将生成的类名粘贴到我的代码中时，我得到正确的类名）红点的位置）。但是，当我传递变量 cName（这是一个以正确的类名作为其值的字符串）时，红点只是将其自身置于地图顶部的中心并且不会移动。

任何帮助将不胜感激，因为我已经被这个问题困扰了整整两天。此外，如果还有任何其他问题（例如，我的 axios 设置或我的钩子有问题等），也请让我知道，因为我对这一切都很陌生。

非常感谢。

注意红点的位置；无论“cName”计算为什么，它总是默认为这个位置。

Answer 1

Tailwind 如何提取类名的最重要含义是，它只会查找源文件中以完整不间断的字符串形式存在的类。

如果您使用字符串插值或将部分类名连接在一起，Tailwind 将找不到它们，因此不会生成相应的 CSS。

Tailwind 中的动态类名

我建议将纬度和经度值存储在变量中，然后通过

style

属性应用它们：

<img
  src={pixel}
  alt='ISS'
  style={{top: `${lat}px`, left: `${lon}px`}}
  ...
/>

很酷的项目！