我找不到一種方法，每次在 React 中創(chuàng)建元素時，它都會得到一個 css 過渡。我在 React 中創(chuàng)建了一個簡單的應(yīng)用程序，其中包含很少的組件和上下文。我希望在創(chuàng)建的每個“項目”組件上轉(zhuǎn)換不透明度。但我不知道怎么回事。每次單擊“項目”組件時，我都會設(shè)法更改類，但每次創(chuàng)建一個組件時，我都希望有一個過渡。我應(yīng)該在某個地方使用setTimeOut嗎？我應(yīng)該使用使用Effect嗎？這是我的代碼：// This is my Contextimport React, { createContext, useState, useEffect } from "react";export const Context = createContext();export const ContextProvider = (props) => {  const [currentProjects, setCurrentProjects] = useState(() => {    const localData = localStorage.getItem("currentProjects");    return localData ? JSON.parse(localData) : [];  });  useEffect(() => {    localStorage.setItem("currentProjects", JSON.stringify(currentProjects));    console.log("currentProjects got updated");  }, [currentProjects]);  return (    <Context.Provider value={[currentProjects, setCurrentProjects]}>      {props.children}    </Context.Provider>  );};這是我的項目列表組件import React, { useContext, useEffect } from "react";import Project from "./Project.js";import { Context } from "./Context.js";import "./ProjectList.css";const ProjectList = () => {  const [currentProjects, setCurrentProjects] = useContext(Context);  return (    <div className="ProjectListContainer">      {currentProjects.map((item) => {        return (          <Project            artist={item.artist}            project={item.project}            label={item.label}          />        );      })}    </div>  );};export default ProjectList;這是我的項目組件import React, { useContext, useEffect, useState, Component } from "react";import "./Project.css";const Project = ({ artist, project, label, light }) => {  //   const [status, setStatus] = useState({ clicked: false });  //   const divGotCliked = (e) => {  //     setStatus({ clicked: !status.clicked });  //   };  return (    <div className="ProjectContainer">      <div className="container1">        <div>          <h2>{artist} </h2>          <h2>{project} </h2>          <h2>{label} </h2>        </div>      </div>    </div>  );};export default Project;