ReactJS中如何显示最大化窗口的标题栏图标

问题排查 #

你的代码存在两处问题导致最大化图标显示异常、标题位置不符合预期：

• isMaximized 属性传入的是字符串类型的"true"，该属性要求接收布尔类型值，类型不匹配会直接导致组件对窗口状态的判断出错，最大化按钮渲染异常
• 未对TitleBar做布局对齐配置，默认标题会占据左侧全部可用空间，无法贴合右侧窗口控制按钮区域显示

修正后代码 #

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
        isMaximized={true}
        background="orange"
        style={{ display: 'flex', justifyContent: 'flex-end' }}
      />
    </div>
  );
}

额外配置说明 #

• 如果你需要仅显示最大化按钮、隐藏其余窗口控制按钮，给TitleBar组件追加minimize={false}、close={false}属性即可
• 如果调整属性后图标仍无法正常渲染，检查本地安装的react-desktop版本，旧版本存在窗口控件图标渲染的已知问题，升级到最新稳定版即可修复
• 你可以通过修改外层容器宽度、TitleBar的内边距属性微调标题和最大化图标的间距，匹配你需要的展示效果

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