在 Electron JS 应用程序中使用自定义标题栏答案

【问题标题】：Using a Custom Title Bar in an Electron JS App在 Electron JS 应用程序中使用自定义标题栏
【发布时间】：2019-02-25 15:01:16
【问题描述】：

我刚开始使用electron-react-boilerplate，目前正在尝试通过使用electron-titlebar 安装的npm install --save eletron-titlebar 包来使用自定义标题栏。

基于我对电子样板和一般电子的非常薄弱的理解，我尝试了electron-titlebar 文档的建议，并在与Root 组件的children 元素相同的级别上引入了<TitleBar> 组件，产生下面的代码。

问题：但是，只要有<TitleBar> 组件，我们就会得到一个空白屏幕。移除组件后，我们恢复了原来的 DOM 元素，但很明显，没有标题栏，因为我们刚刚移除了它。

JS控制台也显示错误

react-dom.development.js:55 未捕获错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

在electron-react-boilerplate 设置中使用electron-titlebar 的正确方法是什么？

/app/containers/App.js

// @flow
import * as React from 'react';
import TitleBar from 'electron-titlebar';

type Props = {
  children: React.Node
};

export default class App extends React.Component<Props> {
  props: Props;

  render() {
    const { children } = this.props;
    return (
      <div>
        <TitleBar
          title="Electron"
        />
        {children}
      </div>

    )
  }
}

【问题讨论】：

标签： javascript node.js reactjs electron

【解决方案1】：

刚开始自己搞乱 Electron 并遇到了这个错误。我能够通过将导入更改为 require 来解决它：

const TitleBar = require('frameless-titlebar');

【讨论】：