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渲染Onsen UI工具栏

1 个答案: