reactjs子組件傳遞數據給父組件
父組件嵌套子組件，父組件的處理函數通過屬性的方式賦值組子組件（
<GenderSelect handleSelect={this.handleSelect}></GenderSelect>
），子組件通過觸發事件，委托調用父組件的處理函數，從而實現把值傳給父組件（return <select onChange={this.props.handleSelect}>，
handleSelect: function(event) {
this.setState({gender: event.target.value})
}
）

react實現路由可以直接使用react-router。 ReactRouter是由Ryan Florence開發的應用于ReactJS的路由組件，它通過定義ReactJS組件<Routes>及相關子組件來實現頁面路由的映射、參數的解析和傳遞。 以下是例子： var ReactRouter = require('react-router'); var Routes = ReactRouter.Routes; var Route = ReactRouter.Route; //定義整個頁面的路由結構 var routes = ( <Routes location="hash"> <Route path="/" handler={App}> <Route path="books" name="bookList" handler={Books}/> <Route path="movies" name="movieList" handler={Movies}/> </Route> </Routes> );

react實現路由可以直接使用react-router。ReactRouter是由Ryan Florence開發的應用于ReactJS的路由組件，它通過定義ReactJS組件及相關子組件來實現頁面路由的映射、參數的解析和傳遞。以下是例子：var ReactRouter = require('react-router'); 

Link組件用于正常的用戶點擊跳轉，但是有時還需要表單跳轉、點擊按鈕跳轉等操作。這些情況怎么跟React Router對接呢？
下面是一個表單。
?

1
2
3
4
5

<form onSubmit={this.handleSubmit}>
<input type="text" placeholder="userName"/>
<input type="text" placeholder="repo"/>
<button type="submit">Go</button>
</form>

第一種方法是使用browserHistory.push
?

1
2
3
4
5
6
7
8
9
10

import { browserHistory } from 'react-router'

// ...
handleSubmit(event) {
event.preventDefault()
const userName = event.target.elements[0].value
const repo = event.target.elements[1].value
const path = `/repos/${userName}/${repo}`
browserHistory.push(path)
},

第二種方法是使用context對象。
?

1
2
3
4
5
6
7
8
9
10
11
12

export default React.createClass({

// ask for `router` from context
contextTypes: {
router: React.PropTypes.object
},

handleSubmit(event) {

react實現路由可以直接使用react-router。
ReactRouter是由Ryan Florence開發的應用于ReactJS的路由組件，它通過定義ReactJS組件<Routes>及相關子組件來實現頁面路由的映射、參數的解析和傳遞。
以下是例子：
var ReactRouter = require('react-router');
var Routes = ReactRouter.Routes;
var Route = ReactRouter.Route;

//定義整個頁面的路由結構
var routes = (
<Routes location="hash">
<Route path="/" handler={App}>
<Route path="books" name="bookList" handler={Books}/>
<Route path="movies" name="movieList" handler={Movies}/>
</Route>
</Routes>
);