const [selectedServiceIndex, setSelectedServiceIndex] = useState(null);
const [isServiceSelected, setIsServiceSelected] = useState(false);
const handleServiceClick = (index) => {
console.log("Clicked service index:", index); // Add a log to track the index clicked
if (index >= 0 && index < services_data.length) {
// Check if index is within range
if (isServiceSelected && selectedServiceIndex === index) {
setIsServiceSelected(false); // If already selected, deselect
console.log(false);
} else {
setSelectedServiceIndex(index);
setIsServiceSelected(true); // Select the service
console.log(true);
}
} else {
console.error("Invalid index or index out of range");
}
};
将卡片组件创建为服务：
const services = services_data.map((item, index) => (
<div key={index} onClick={() => handleServiceClick(index)}>
<Service
name={item.name}
imageName={item.imageName}
className={item.className}
desc={item.desc}
/>
</div>
));
这里我提供服务，最初，所有 3 个服务都显示：
return (
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<main>
<div>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossOrigin="anonymous"
referrerPolicy="no-referrer"
/>
{!isServiceSelected ? (
<section className="section services-section" id="services">
<div className="container">
<div className="row">
<div className="page-header">
<div className="section-title">
<h2>Services</h2>
<p>
Enhance efficiency, reliability, and quality with
automated test solutions.
</p>
</div>
</div>
</div>
<div className="row services-row">{services}</div>
</div>
</section>
) : (
<div
className={`selected-service ${
isServiceSelected ? "active" : ""
}`}
>
{services[selectedServiceIndex]}
</div>
)}
</div>
</main>
</body>
</html>
);
通过单击其中任何一个，将导致 isServiceSelected 布尔值切换 true/false如果为 false，则显示所有服务
<div className="row services-row">{services}</div>' else, only the selected one is displayed using the index of the selected service
{services[selectedServiceIndex]}`
现在，一切都按预期进行，单击一个服务会使整个初始内容消失，只剩下一个服务，在页面顶部，再次单击，带回初始内容，包括标题和所有服务问题是我如何设计它以淡出或其他任何东西，现在我质疑我的方法是否有好处，似乎从一开始就是一个坏主意
Bcs，这样做，内容会改变，如果我想淡出
<section className="section services-section" id="services">
下的所有内容将不起作用，因为该部分本身不再存在我不是要求任何人为我编写这个代码，我只是需要一些关于如何解决这个问题的建议
我无法提供基本的工作示例 bcs，这是使用 React，所以我必须链接一个沙箱参考，其中包含应用程序的剥离版本，以便更容易查看
这是一个简单的解决方案，但可能不是最佳的性能解决方案，具体取决于同一页面上的 DOM 中渲染了多少其他元素。
根据服务之间的转换应该是什么样子，另一种方法可能是这样的： 当用户选择不同的服务时，首先将 isServiceVisible 状态设置为 false。这会将“selected-service”div 的不透明度设置为 0。“selected-service”还需要有一个不透明度转换，例如 0.5 秒（“transition: opacity 0.5s”）。 然后设置一个 0.5s 秒的超时，当它结束时，将：将 setSelectedServiceIndex 更新为用户选择的服务，并再次将 isServiceVisible 更新为 true，因此新服务将淡入。
仅以代码片段为例：
const App = () => {
const [isServiceVisible, setIsServiceVisible] = useState(true);
const [selectedService, setSelectedService] = useState('home');
const handleSelectService = () => {
setIsServiceVisible(false);
setTimeout(() => {
setSelectedService('products');
setIsServiceVisible(true);
}, 500);
};
return (
<div className="selected-service" style={{ opacity: isServiceVisible ? 1 : 0, transition: 'opacity 0.5s' }}>
</div>
)
}
我希望我正确理解你的问题。
顺便说一句：如果处理不当，使用 setTimeout 可能会导致不必要的副作用，因此如果组件卸载，请务必清除超时。