我找不到一种方法,每次在 React 中创建元素时,它都会得到一个 css 过渡。我在 React 中创建了一个简单的应用程序,其中包含很少的组件和上下文。我希望在创建的每个“项目”组件上转换不透明度。但我不知道怎么回事。每次单击“项目”组件时,我都会设法更改类,但每次创建一个组件时,我都希望有一个过渡。我应该在某个地方使用setTimeOut吗?我应该使用使用Effect吗?
这是我的代码:
// This is my Context
import 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;
小怪兽爱吃肉
相关分类