Question

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

到目前为止，我收到错误＆＃39;路线未定义＆＃39;而我正在查看示例＆amp;文档，但我只看到提供了initialRoute道具，如何＆amp; route道具生成在哪里？因为它似乎没有指定。

这是我的组件代码：

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件你需要注意的事情。它们不是直接与温泉有关，而是在使用反应时会出现很多。

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

看来你也知道这两个。所以唯一剩下的就是确保你遵循它们。

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

如果你没有将SignUp组件放在其他导航器，tabbar或拆分器中，那么你的render方法实际上并不需要Ons.Page。这是他们需要时的唯一案例。如果碰巧将其中一个组件作为父组件，则可以指定key。

PS ：我认为应该安装一个React Component Inspector（类似this） - 然后我想你可能会看到发生错误的地方。我想如果你知道问题是哪一行你就能解决它。：）

Answer 2

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

修复之前

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的导航器？

2 个答案: