ReactJS中react-desktop TitleBar如何仅显示窗口最大化图标

核心实现逻辑 #

react-desktop/windows 模块的 TitleBar 组件的controls属性支持对象格式的细粒度配置，无需额外写CSS覆盖样式，直接通过属性声明即可单独控制每个窗口按钮的显示/隐藏，不需要修改组件源码。
原有代码里直接给controls传布尔值true，会默认渲染全部三个窗口控制按钮（最小化、最大化/还原、关闭），只需要把controls改成配置对象，关闭不需要的按钮渲染即可，同时注意isMaximized属性需要传入布尔值而非字符串，避免组件内部状态判断异常。

修改后完整代码 #

import React from 'react'
import { TitleBar } from 'react-desktop/windows';

export default function App() {
  return (
    <div style={{
      display: 'block', width: 400, paddingLeft: 30
    }}>
      <h4>React Desktop Windows TitleBar Component</h4>
      <TitleBar
        title="Sample TitleBar"
        // 控制按钮细粒度配置：仅显示最大化按钮，隐藏最小化、关闭按钮
        controls={{
          minimize: false,
          maximize: true,
          close: false
        }}
        isMaximized={true}
        background="orange"
      />
    </div>
  );
}

效果对比 #

• 修改前默认渲染效果：
  
• 修改后达成的预期效果：
  

扩展说明 #

如果需要自定义按钮点击逻辑，可以给组件传入对应回调属性：

• onMinimizeClick：最小化按钮点击回调
• onMaximizeClick：最大化/还原按钮点击回调
• onCloseClick：关闭按钮点击回调
  即使对应按钮设置为隐藏，传入回调也不会影响组件正常渲染。

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