如何在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中正確使用溫泉的導航器？

回答

相關問題