请问一下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');&nbsp;

Answer 4

Link组件用于正常的用户点击跳转，但是有时还需要表单跳转、点击按钮跳转等操作。这些情况怎么跟React Router对接呢？下面是一个表单。?12345<form onSubmit={this.handleSubmit}><input type="text" placeholder="userName"/><input type="text" placeholder="repo"/><button type="submit">Go</button></form>第一种方法是使用browserHistory.push?12345678910import { browserHistory } from 'react-router'// ...handleSubmit(event) {event.preventDefault()const userName = event.target.elements[0].valueconst repo = event.target.elements[1].valueconst path = `/repos/${userName}/${repo}`browserHistory.push(path)},第二种方法是使用context对象。?123456789101112export default React.createClass({// ask for `router` from contextcontextTypes: {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>);