在电子JS应用中使用自定义标题栏

Question

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

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

问题:然而，每当组件存在时，我们就会得到一个空白屏幕。删除组件会让我们返回原来的DOM元素，但是很明显，没有标题栏，因为我们刚刚删除了它。

JS控制台中也显示了一个错误。

. is :55 Uncaught错误:元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但未定义。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。

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

/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

我刚开始和电子打交道，就遇到了这个错误。我能够通过更改我的导入来解决这个问题：

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