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

Question

我刚刚开始使用electron-react-boilerplate ，当前尝试使用通过使用npm install --save eletron-titlebar的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>

    )
  }
}

Answer 1

刚开始自己​​弄乱Electron并遇到了这个错误。 我可以通过将导入更改为要求来解决此问题：

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