我的 className={`...${getBackDropPach()}...`} 不起作用

Question

我无法从 TMDB API 获取background_path URL。我使用函数

getBackdropPath()

从 TMDB API 获取图像。

虽然我的

console.log(getBackdropPath(movie.backdrop_path))

引导我准确地获取 URL 图像，但它在我的 className 中不起作用。我将非常感谢您的帮助！！

import React, {useEffect, useState} from "react"
import axios from "../api/axios"
import { useParams } from "react-router-dom"

function getPosterPath(poster_path) {
    return `https://www.themoviedb.org/t/p/w220_and_h330_face${poster_path}`;
  }

  function getBackdropPath(backdrop_path) {
    return `https://image.tmdb.org/t/p/original${backdrop_path}`;
  }

function MovieDetail() {
    const [movie, setMovie] = useState({});
    const { id } = useParams();

    useEffect(() => {
        const fetchMovie = async() => {
          const request = await axios.get(`/movie/${id}?api_key=f98a22858bd519d0862f0d61e33bb85b&language=en-US`)
          setMovie(request.data)
          
        }
        fetchMovie()
      },[id])

  
  return (
    <div>
        <div className={`bg-[url('${getBackdropPath(movie.backdrop_path)}')] bg-center bg-no-repeat bg-cover w-full h-[200px]`}></div>
        {console.log(getBackdropPath(movie.backdrop_path))}
        <div className=" w-full h-full flex flex-col items-center  z-10">
            <img src={getPosterPath(movie.poster_path)} alt={movie.title} className="w-[315px] h-[440px]" />
            <div className="flex flex-col  mt-10 px-4">
                    <h2 className="text-white">{movie.title}</h2>
                    <p className="text-white ">{movie.overview}</p>
            </div>
        </div>
    </div>
  )
}

export default MovieDetail

Answer 1

根据文档：

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

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

不要动态构造类名

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

在上面的示例中，字符串

text-red-600

和

text-green-600

不存在，因此 Tailwind 不会生成这些类。 相反，请确保您使用的任何类名完整存在：

始终使用完整的类名

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

您可以考虑使用

style

属性，例如：

<div className="…" style={{ backgroundImage: `url('${getBackdropPath(movie.backdrop_path)}')` }}></div>