请问一下reactjs 两个component之间怎么通信?

Question

reactjs 两个component之间怎么通信

Answer 1

reactjs子组件传递数据给父组件
父组件嵌套子组件，父组件的处理函数通过属性的方式赋值组子组件（
<GenderSelect handleSelect={this.handleSelect}></GenderSelect>
），子组件通过触发事件，委托调用父组件的处理函数，从而实现把值传给父组件（return <select onChange={this.props.handleSelect}>，
handleSelect: function(event) {
this.setState({gender: event.target.value})
}
）

Answer 2

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> );

Answer 3

react实现路由可以直接使用react-router。ReactRouter是由Ryan Florence开发的应用于ReactJS的路由组件，它通过定义ReactJS组件及相关子组件来实现页面路由的映射、参数的解析和传递。以下是例子：var ReactRouter = require('react-router'); 

Answer 4

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) {

Answer 5

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>
);