React JS中如何基于props数据动态调整按钮尺寸

实现方案 #

你可以通过判断props.github是否存在，动态给按钮绑定类名控制尺寸，同时可以优化原有隐藏逻辑避免多余DOM节点残留，具体代码如下：

1. 改造组件JSX

<div className='projectBtn'>
  <a href={props.liveWebsite} target='_blank' rel="noopener noreferrer">
    {/* 动态拼接类名，无github数据时追加大尺寸类 */}
    <button 
      className={`liveWebsiteBtn ${!props.github ? 'liveWebsiteBtn--large' : ''}`}
    >
      Live Website
    </button>
  </a>

  {/* 直接条件渲染整个github入口，比给button加hidden更合理 */}
  {props.github && (
    <a href={props.github} target='_blank' rel="noopener noreferrer">
      <button className='githubBtn'>Github Code</button>
    </a>
  )}
</div>;

2. 补充对应CSS样式

你可以根据自己的需求自定义两种状态的尺寸，示例样式如下：

/* 原有按钮基础样式 */
.projectBtn {
  display: flex;
  gap: 12px;
}
.liveWebsiteBtn, .githubBtn {
  padding: 6px 16px;
  height: 32px;
  border-radius: 4px;
  border: none;
}
/* 无github数据时的大尺寸样式 */
.liveWebsiteBtn--large {
  padding: 8px 24px;
  height: 36px;
  width: 100%;
}

可选：内联样式实现（适合小范围临时调整）

如果不想新增CSS类，也可以直接用内联样式动态控制：

<button 
  className='liveWebsiteBtn'
  style={!props.github ? {height: '36px', width: '100%', padding: '8px 24px'} : {}}
>
  Live Website
</button>

补充说明 #

• 当数据源中github字段为undefined、空字符串等假值时，会自动触发大尺寸样式，无需额外判断
• 新增的rel="noopener noreferrer"是外部链接跳转的标准安全配置，避免新页面操作原页面的安全风险

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