我用下面的代碼創建了一個彈出橫幅（對不起，如果格式是關閉的）
//this is in folder Banner.tsx
import React, {useCallback} from "react";
type Properties = {
close: () => void;
text: string;
const Banner: React.FC<Properties> = ({close, text}) => {
const onClick = useCallback(() => {
close();},
[close, text]);
return (
<div className = "BannerBox">
<div className = "banner">
<span className = "popup"> {onClick}{close}[x]
</span>
{text}
</div>
</div>
);
};
export default Banner;
//this is App.tsx
import Banner from "./Components/Banner";
function App(): JSX.Element {
const [isOpen, setIsOpen]=useState(false);
const toggleBanner = () => {
SetIsOpen(!isOpen);
};
return (
<div>
<input type = "button"
value = "popup"
onClick={toggleBanner}/>
<p>hi</p>
{isOpen && <Banner text = {"hello"} close={function (): void { throw new Error("Function not implemented.");
} }/>}
</div>
export default App;
//this is my Banner.css file (let me know if you need the full code but this is some of it)
.BannerBox{
position: fixed;
background: blue;
width:50%;
}
.banner{
position: relative;
width: 100%;
}
.popup{
content: 'x';
position: fixed;
background: green;
}
代碼編譯得很好，我沒有收到任何錯誤，但問題是當橫幅彈出時，我無法通過單擊“X”來關閉它，我必須重繪 頁面才能關閉橫幅，然后我不知道如何解決這個問題。任何幫助表示贊賞！
uj5u.com熱心網友回復：
該close函式需要傳遞給作為按鈕的 span 的 onClick 回呼。這些被添加為 jsx 元素的“屬性”。請參閱下面onClick={onClick}通過參考傳遞 onClick 回呼函式的位置（注意不要在大括號內呼叫括號）
Banner.tsx 的回歸
<span className="popup" onClick={onClick}>
[x]
</span>
close 被傳遞到您的 Banner 組件中，因此這需要在您的 App 組件中實作。我通過將 isOpen 顯式設定為 false（而不是呼叫 toggle）來確保它始終關閉
在 App.tsx 的回報中
{isOpen && <Banner text={"hello"} close={() => setIsOpen(false)} />}
所以總共
Banner.tsx
import React, { useCallback } from "react";
import "./Banner.css";
type Properties = {
close: () => void;
text: string;
};
const Banner: React.FC<Properties> = ({ close, text }) => {
const onClick = useCallback(() => {
close();
}, [close]);
return (
<div className="BannerBox">
<div className="banner">
<span className="popup" onClick={onClick}>
[x]
</span>
{text}
</div>
</div>
);
};
export default Banner;
和 App.tsx
import React, { useState } from "react";
import Banner from "./Components/Banner";
function App(): JSX.Element {
const [isOpen, setIsOpen] = useState(false);
const toggleBanner = () => {
setIsOpen(!isOpen);
};
return (
<div>
<input type="button" value="popup" onClick={toggleBanner} />
<p>hi</p>
{isOpen && <Banner text={"hello"} close={() => setIsOpen(false)} />}
</div>
);
}
export default App;
在此處查看代碼和框
uj5u.com熱心網友回復：
讓我們假設close()實際上會關閉彈出橫幅，因為您沒有顯示它的實作。
這條線導致了這個問題
<span className = "popup">{onClick}{close}[x]</span>
您應該將一個函式傳遞給onClick偵聽器。就像是：
<span className = "popup" onClick={close}>[x]</span>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/354956.html