TLDR：無法弄清楚為什么在沒有傳遞道具的情況下仍在渲染組件。
所以我一直在構建一個 NextJS 應用程式，我有這個橫幅組件，它顯示在我網站的每個頁面上。它有一些標題文本、按鈕和影像：
return (
<div className={bannerStyles.wrapper}>
<div className={classnames(bannerStyles.banner, "wrap", "center")}>
<div className={bannerStyles.banner_left}>
<h1>{props.header}</h1>
<div className={bannerStyles.button_wrapper}>
<div className={bannerStyles.button}>
<Button>{props.button || null}</Button>
</div>
<div className={bannerStyles.button}>
<Button>{props.scnd_button || null}</Button>
</div>
</div>
</div>
<div className={bannerStyles.banner_right}>
<Image src={props.image} alt=""></Image>
</div>
</div>
</div>
)
}
在這里面，你可以看到我有兩個 Button 組件（MDEast 是一個箭頭圖示）：
const Button = ({children}) => {
return (
<div className={buttonStyles.button}>
<Link href="/"><a>{children} <MdEast /></a></Link>
</div>
)
}
現在我想要一個選項，如果沒有傳遞 prop，按鈕組件不會渲染/從頁面隱藏，因此它是每頁可選的。然而按鈕仍然呈現，即使我沒有在我的關于頁面上傳遞任何道具。我的關于頁面：
const About = () => {
return (
<>
<Banner
header="Hello this is my code"
image={banner_placeholder}
/>
</>
)
}
附注。我對 React 和 NextJS 還很陌生，所以這可能是一個初學者的錯誤，或者我對基礎知識的理解不夠好，但是有人能指出我正確的方向嗎？
uj5u.com熱心網友回復：
要有條件地呈現按鈕，您可以使用：
props.button && <Button>{props.button}</Button>
當 props.button 為假時，按鈕將不會被渲染。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/365784.html
上一篇：更新物件陣列狀態的更短方法？