猿问
下载APP

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

reactjs 两个component之间怎么通信


青春有我
浏览 110回答 5
5回答

侃侃无极

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

45度呼吸

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

冉冉说

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

MYYA

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>);
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答