如何在React中正确使用温泉的导航器？

我想在React中实现一个简单的温泉导航器。如何在React中正确使用温泉的导航器？

到目前为止，我收到一个错误“路线没有定义”，我是&文档翻翻例子，但我只看到了initialRoute道具被提供，如何&哪里的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正确的语法？我错过了什么吗？

来源

2016-08-15 Joshua Rajandiran

当使用Ons.Navigator反应两个所需的性质是：

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

看来你已经知道这2个，但还有2个其他的东西需要注意。它们并不直接与温泉有关，但在使用一般反应时会出现很多。

只要你有（的Ons.Page标签阵列为例）DOM元素的列表中的每个那些应该有一个独特的key财产。
每当你使用一个方法，你需要确保你绑定它，如果你需要一些额外的参数。

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

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

如果您没有将SignUp组件放在其他导航器，tabbar或splitter中，那么在其渲染方法中实际上并不需要Ons.Page。这些是唯一需要的情况。如果您碰巧有其中一个组件作为父项，那么您可以指定key。

PS：我觉得应该有一个阵营组件检查（像this），你可以安装 - 那么我想你可以看到发生错误的地方。我想如果你知道哪一行是问题出在你能解决的问题上。 :)

来源

2016-08-16 05:24:29

如何在React中正确使用温泉的导航器？

回答

相关问题