我創建了一個自定義側面板，它從右側彈出并在面板外部單擊時關閉。打開和關閉時的過渡效果不會發生。有人可以幫我弄這個嗎？幫助將非常感激
import React, { useState } from "react";
import ReactDOM from "react-dom";
import SlideDrawer from "./SlideDrawer.jsx";
function App() {
const [drawerOpen, setDrawerOpen] = useState(false);
return (
<div>
{drawerOpen ? (
<SlideDrawer show={drawerOpen} {...{ setDrawerOpen }} />
) : null}
<button
onClick={() => {
setDrawerOpen(!drawerOpen);
}}
>
Click me!
</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
沙盒：https ://codesandbox.io/s/react-slider-demo-bpi83t?file=/src/index.js:0-558
uj5u.com熱心網友回復：
這現在正在作業，這里是您的組件的片段，下面是對為什么它不作業的正確解釋。
SlideDrawer.jsx
import React, { useEffect, useRef } from "react";
import "./SlideDrawer.css";
export default function SlideDrawer({ setDrawerOpen, show }) {
const sideMenuRef = useRef(null);
const onOutsideClick = e => {
if(sideMenuRef.current && !sideMenuRef.current.contains(e.target) && show) {
setDrawerOpen(false)
}
}
useEffect(() => {
document.addEventListener("click", onOutsideClick);
return () => document.removeEventListener("click", onOutsideClick);
}, [show, sideMenuRef]);
return (
<div ref={sideMenuRef} className={`side-drawer ${show ? 'open' : ''}`}>
<h1>Hello, I'm sliding!</h1>
</div>
);
}
索引.js
import React, { useState } from "react";
import ReactDOM from "react-dom";
import SlideDrawer from "./SlideDrawer.jsx";
function App() {
const [drawerOpen, setDrawerOpen] = useState(false);
return (
<div>
<SlideDrawer show={drawerOpen} setDrawerOpen={setDrawerOpen} />
<button
onClick={() => setDrawerOpen(!drawerOpen)}
>
Click me!
</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
解釋
在index.js這部分你是有條件的渲染：
{drawerOpen ? (
<SlideDrawer show={drawerOpen} {...{ setDrawerOpen }} />
) : null}
因此，每次drawerOpen更改時都會創建該組件。
這部分代碼驗證點擊是否在抽屜內完成，這樣您就可以在抽屜外面關閉它。
const onOutsideClick = e => {
if(sideMenuRef.current && !sideMenuRef.current.contains(e.target) && show) {
setDrawerOpen(false)
}
}
編輯：
我使用 refs 邏輯更改SlideDrawer組件。
希望能幫助到你！
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/533738.html
標籤：javascript网页格式CSS反应ecmascript-6