我正在做一个React项目。我面临这个问题：如果用户点击嵌套在antd库组件抽屉中的视频图标，我希望他观看与胸部锻炼相对应的视频(该组件还包含其他信息，如锻炼标题…(我希望用户在抽屉未关闭的情况下重定向到此页面(抽屉占据页面宽度的50%，页面的其余部分覆盖着灰色bg颜色，但仍然可见(，然后如果他点击"；背面"；顺便说一句。app.js 的代码
import { Route, Routes } from "react-router-dom";
// pages & components
import { ListOfExercises } from "./components/lists/ListOfExercises";
import Navbar from "./components/Navbar/Navbar";
import ChestWorkouts from "./pages/Chest";
import ChestVideoWorkouts from "./pages/ChestVideoWorkouts";
import Home from "./pages/Home";
function App() {
return (
<div className="App">
<Navbar />
<ListOfExercises></ListOfExercises>
<div className="pages">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/chest" element={<ChestWorkouts />} />
<Route path="/video-workout" element={<ChestVideoWorkouts />} />
</Routes>
</div>
</div>
);
}
export default App;
WorkoutInfosDrawer是WorkoutDetails的子项，WorkoutDetails是ChestWorkouts页面的子项WorkoutsSection的子项和WorkoutInfosDrawer.js:
import "./drawer_content_styles.scss";
import { WorkoutInfos } from "./WorkoutInfos";
export function WorkoutInfosDrawer({ workoutTitle, setsize }) {
function infos() {
let infos =
workoutTitle === "Barbell Flat Bench Press"
? {
description:
"The bench press is a classic exercise. Powerlifters do it to see who has the most pressing strength, gym rats use it to build up their pecs, and athletes utilize the bench for explosive pushing power. ",
benefits: {
b1: "This lift is a necessiry for powerlifters, since it’s one of the three lifts judged in a powerlifting meet.",
b2: "The bench press recruits muscles in the chest, triceps, and shoulders — so you’ll build a muscular torso",
b3: "Compared to other chest exercises, you can load the bench press up with a relatively heavy amount of weight.",
},
howToDo:
"Lay back down on a bench, arch your lower back slightly, and plant your feet on the floor. Pull your shoulder blades together to enhance stability and upper back strength. Grab the bar (varying grips) and squeeze the hand hard to flex the arm and grip muscles maximally. With the load unracked, think about pulling the barbell to the body to touch the sternum/base of the chest. Press the weight upwards, making sure to keep your back tight, and shoulder blades pulled together.",
}
: "";
return infos;
}
return (
<>
<WorkoutInfos
{...{
setsize,
workoutTitle,
}}
infos={infos()}
/>
</>
);
}
和WorkoutInfos.js的链接标签：
import { Button } from "antd";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import minus from "../../assets/img/minus.png";
import plus from "../../assets/img/plus-sign.svg";
import videoPlayer from "../../assets/img/video.svg";
import "./drawer_content_styles.scss";
export const WorkoutInfos = ({ workoutTitle, infos, setsize }) => {
return (
<div className="workout-infos" style={{ paddingBottom: paddingBottom }}>
<div className="workout-infos-left">
<div className="workout-infos-title">
<span>{workoutTitle}</span>
</div>
<div className="workout-infos-other-infos">
<div className="workout-infos-span1-wrapper">
<span>{infos?.description}</span>
</div>
<div className="workout-infos-span2-wrapper">
<span className="workout-infos-span1">
The workout's benefits :
</span>
<div className="workout-infos-span2-wrapper-div">
<span className="workout-infos-span2">{infos?.benefits?.b1}</span>
</div>
<div className="workout-infos-span2-wrapper-div">
<span className="workout-infos-span3">{infos?.benefits?.b2}</span>
</div>
{infos?.benefits?.b3 && (
<div className="workout-infos-span2-wrapper-div">
<span className="workout-infos-span4">
{infos?.benefits?.b3}
</span>
</div>
)}
</div>
<div className="workout-infos-howto-do">
<span className="workout-infos-howto-do-span1">How to do it :</span>
</div>
<div className="workout-infos-sign">
<div style={{ overflow: overflow, height: height }}>
<span className="workout-infos-sign-span">{infos?.howToDo}</span>
</div>
<Button className="workout-infos-sign-btn" onClick={handleBtnClick}>
{overflow === "hidden" ? (
<img src={plus} alt="" />
) : (
<img src={minus} alt="" />
)}
</Button>
</div>
</div>
</div>
<div className="workout-infos-right">
<Link to="/video-workout">
<Button className="workout-infos-sign-btn">
<img src={videoPlayer} alt="" />
</Button>
</Link>
</div>
</div>
);
};
由于drawer组件嵌套在<ChestWorkouts />的深处，因此当不再渲染<ChestWorkouts />时，它将不会进行渲染。
这里的关键是构造组件，使抽屉组件不嵌套在任何管线中，这样它就不会在其父组件嵌套时消失。也许您可以像对<Navbar />所做的那样，将抽屉组件放置在<Routes />之外(这就是Navbar不会在路线更改时消失的原因(。
您可以将抽屉放置在组件树的根目录下，并通过将其传递给其他路由组件或通过redux来管理其状态。