React 中如何正确使用 Onsen 的 Navigator？

Question

我正在尝试在 React 中实现一个简单的 Onsen Navigator。

到目前为止，我收到一个错误 'route is not defined'，我正在查看示例和文档，但我只看到提供了 initialRoute 道具，[=12= 如何以及在哪里提供] 道具生成什么的？因为它似乎没有指定。

这是我的组件代码：

import React, {PropTypes} from 'react';
import ons from 'onsenui';
import * as Ons from 'react-onsenui';

class SignUp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index : 0
    };
    this.renderPage = this.renderPage.bind(this);
    this.pushPage = this.pushPage.bind(this);
  }

  pushPage(navigator) {
    navigator.pushPage({
      title: `Another page ${this.state.index}`,
      hasBackButton: true
    });

    this.setState({index: this.state.index++});
  }

  renderPage(route, navigator) {
    return (
      <Ons.Page key={route.title}>
        <section style={{margin: '16px', textAlign: 'center'}}>
          <Ons.Button onClick={this.pushPage}>

            Push Page
          </Ons.Button>
        </section>
      </Ons.Page>
    );
  }

  render() {
    return (
      <Ons.Page key={route.title}>
        <Ons.Navigator
          renderPage={this.renderPage}
          initialRoute={{
            title: 'First page',
            hasBackButton: false
          }}
        />
      </Ons.Page>
    );
  }
};

SignUp.propTypes = {
  'data-pageName': PropTypes.string.isRequired
};

export default SignUp;

这是 ES6 中的正确语法吗？我错过了什么吗？

Answer 1

在反应中使用 Ons.Navigator 时，两个必需的属性是：

initialRoute - 它应该是一个对象。
renderPage - 接收 2 个参数的方法 - route 和 navigator。路由应该是一个类似于 initialRoute 的对象。您在调用 pushPage 和类似方法时提供该对象。

看来这2个你已经知道了，但还有2个需要注意的地方。它们与温泉没有直接关系，但通常在使用 React 时会出现很多。

每当你有一个 dom 元素的列表（例如 Ons.Page 标签的数组）时，每个元素都应该有一个唯一的 key 属性.
每当你使用一个方法时，如果你需要一些额外的参数，你需要确保你绑定了它。

看来你也认识这两个。所以唯一剩下的就是确保你跟随他们。

您的语法正确 - 唯一缺少的是 SignUp.render 中的 route 变量。也许您最初复制了 renderPage 方法，这就是您剩下的 Ons.Page.

如果您没有将 SignUp 组件放入其他导航器、选项卡栏或拆分器中，那么您实际上不需要在其渲染方法中使用 Ons.Page。这些是唯一需要的情况。如果您碰巧将其中一个组件作为父组件，那么您只需指定 key.

PS：我认为应该有一个 React Component Inspector（类似于 this），您可以安装它 - 那么我想您可能是能够看到错误发生的地方。我认为，如果您知道问题出在哪条线上，您就可以解决它。 :)

Answer 2

对我来说，对于我传递给 initialRoute() 的对象，它需要一个 props 属性，它本身就是一个带有 key [=34] 的对象=].请参阅下面的之前和之后。

修复前

render() {
    return (
      <Navigator
        initialRoute={{component: DataEntryPage}}
        renderPage={this.renderPage}
      />
    );
  }
}

这导致了以下控制台警告：

Warning: Each child in an array or iterator should have a unique "key" prop.

Check the render method of `Navigator`.

修复后

  render() {
    return (
      <Navigator
        initialRoute={{component: DataEntryPage, props: {key: 'DataEntryPage'}}}
        renderPage={this.renderPage}
      />
    );
  }
}

请注意，我需要做的区别是添加 , props: {key: 'DataEntryPage'}。

随时查看此 medium article 了解更多信息。

React 中如何正确使用 Onsen 的 Navigator？

How do properly use Onsen's Navigator in React?

ecmascript-6

reactjs

onsen-ui