我正在嘗試使用以下代碼創建一個彈出橫幅（對不起，如果格式已關閉）
//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 in 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 = {<><b>testing</b><p>testing popup</p><button>testing button</button></>} handleClose={toggleBanner}/>}
</div>
export default App;
但我不斷收到此錯誤，我不知道如何修復它 -> 型別元素不可分配到型別“字串”。錯誤在這一行：{isOpen && <Banner text = {<> testing
測驗彈窗
測驗按鈕</>} handleClose={toggleBanner}/>}我想我解決了原來的問題，所以現在這就是我的 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;
但是當我添加 css 并設定彈出框的樣式時，當我按 x 時它不會關閉。我必須重繪 網站才能關閉它，但我不知道如何解決這個問題。沒有更多的編譯錯誤。
//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;
}
uj5u.com熱心網友回復：
那是因為在
<Banner text = {<>testing testing popup testing button</>} handleClose={toggleBanner}/>}
text 屬性需要一個字串而不是一個元素。您已在此處自行定義
type Properties = {
close: () => void;
text: string; //this line
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/354905.html