没有传递道具时如何不渲染/隐藏 React 组件？

Question

TLDR：无法弄清楚为什么组件在没有传递任何道具时仍在渲染。

所以我一直在构建一个 NextJS 应用程序，并且我有这个横幅组件，它显示在我网站的每个页面上。它有一些 header 文本、按钮和图像：

const Banner = (props) => {
  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，则 Button 组件不会呈现/从页面中隐藏，因此它是每页可选的。然而按钮仍然呈现，即使我没有在我的关于页面上传递任何道具。 My about page:

const About = () => {
    return (
        <>
            <Banner 
                header="Hello this is my code"
                image={banner_placeholder}
            />
        </>
    )
}

PS。我对 React 和 NextJS 还很陌生，所以这可能是初学者的错误，或者我对基础知识的理解不够好，但是有人能给我指出正确的方向吗？

Answer 1

要有条件地呈现按钮，您可以使用：

props.button && <Button>{props.button}</Button>

当 props.button 为 falsy 时，按钮将不会被渲染。

没有传递道具时如何不渲染/隐藏 React 组件？

How to NOT render/ hide a React component when no prop is passed?

reactjs

next.js

components

react-props