未传递props时如何隐藏/不渲染React组件？Next.js开发问题求助

问题原因 #

你的判断逻辑仅作用于Button组件的内部文本内容，没有控制Button组件本身是否渲染。哪怕传入的children为null，Button组件内部固定的外层容器、Link标签、MdEast箭头图标仍然会正常渲染，因此会出现看不到按钮文字但有按钮占位/箭头的情况。

解决方案 #

在Banner组件中对Button的渲染逻辑加条件判断，仅当存在对应prop时才渲染整个按钮相关结构，修改代码如下：

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}>
            {/* 新增条件判断，仅props.button存在时渲染按钮 */}
            {props.button && (
              <div className={bannerStyles.button}>
                <Button>{props.button}</Button>
              </div>
            )}
            {/* 新增条件判断，仅props.scnd_button存在时渲染第二个按钮 */}
            {props.scnd_button && (
              <div className={bannerStyles.button}>
                <Button>{props.scnd_button}</Button>
              </div>
            )}
          </div>
        </div>
        <div className={bannerStyles.banner_right}>
          <Image src={props.image} alt=""></Image>
        </div>
      </div>
    </div>
  );
};

修改后如果页面没有传递对应的button参数，整个按钮结构都不会出现在DOM中，完全符合你按页面配置按钮展示的需求。

可选优化 #

可以通过参数解构简化代码，避免重复写props.前缀：

// 解构Banner的入参
const Banner = ({ header, image, button, scnd_button }) => {
  // 后续直接使用header、image等变量即可
}

内容的提问来源于stack exchange，提问作者Sjeaurs