React render Onsen UI 工具栏

Question

我是 React 和 Onsen 的新手 UI，我尝试使用此代码在 Navigator 元素内的页面上渲染工具栏，但我只能看到渲染了 Button 和 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'));

Answer 1

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

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

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

import * as Ons from 'react-onsenui';

React render Onsen UI 工具栏

React render Onsen UI Toolbar

reactjs

onsen-ui