Reactjs 在用户界面工具栏上反应渲染

我对React和Onsen UI不熟悉，我尝试使用此代码在Navigator元素内的页面上呈现工具栏，但我只能看到呈现的按钮和Hello World div。有人能告诉我我做错了什么吗

import React from "react";
import ReactDOM from "react-dom";
var ons = require("onsenui");
var Ons = require("react-onsenui");

class App extends React.Component {

    renderToolbar() {
      return (
        <Ons.Toolbar>
          <div className="center">Onsen UI</div>
        </Ons.Toolbar>
     );
    }

    renderPage(){
      return (
        <Ons.Page renderToolbar={this.renderToolbar}>
          <div>
            Hello World!
          </div>
          <Ons.Button>
            Push Page
          </Ons.Button>
        </Ons.Page>
      );
    }

    render() {
      return (
        <Ons.Navigator
          swipeable
          renderPage={this.renderPage}
          initialRoute={{
            title: "First page"
          }}
        />
      );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
var ons=要求（“onsenui”）；
var Ons=要求（“反应onsenui”）；
类应用程序扩展了React.Component{
renderToolbar（）{
返回(
昂森市
);
}
renderPage（）{
返回(
你好，世界！
推送页面
);
}
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'root'））；

可能您缺少导入样式的功能。尝试添加它们：

import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

您还可以使用ES6语法导入Onsen组件：

import * as Ons from 'react-onsenui';