在react中将数据从一个组件传递到另一个组件
Passing data from one component to another in react
我有一个组件,我试图从前一个组件传递数据时,它被单击。我已经尝试setState来改变状态,但没有任何工作。我如何传递数据?数据保存在this.listing
中第一个组件:
const JobOffer = React.createClass({
mixins: [Navigation],
getInitialState: function() {
console.log(this.props.data);
return {
listing: this.props.data
};
},
componentDidMount: function() {
AppStore.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
AppStore.removeChangeListener(this._onChange);
},
_onChange : function(){
},
handleClick: function () {
this.transitionTo('/listing/' + this.state.listing.id );
},
render: function () {
var data = this.state.listing;
var employmentType;
switch(data.employment_type) {
case 'F':
employmentType = 'Full Time';
break;
case 'P':
employmentType = 'Part Time';
break;
case 'H':
employmentType = 'Hourly';
break;
default:
employmentType = 'Unknown';
}
return (
<div>
<a onClick={this.handleClick.bind(this)}>
<img style={{width: 50+'px', height: 50+'px'}} src="/images/job1.jpg" alt="" className="img-circle" />
<div className="title">
<h5>{data.job_title}</h5>
<p>{data.Business.business_name}</p>
</div>
<div className="data">
<div ><i>Posted 1 Day Ago</i></div>
<div className="city"><i className="fa fa-map-marker"></i>{data.Business.business_city}</div>
<div className="type full-time"><i className="fa fa-clock-o"></i>{employmentType}</div>
<div className="sallary"><i className="fa fa-dollar"></i>{data.job_compensation}</div>
</div>
</a>
</div>
);
},
});
module.exports = JobOffer;
你可以看到上面的组件transitionTo我想要的路由,但是我如何传递这个。在调用handleClick时列出数据?
这是我试图传递给它的组件:
var React = require('react');
var ReactBootstrap = require('react-bootstrap');
var Button = ReactBootstrap.Button;
var Modal = ReactBootstrap.Modal;
var AppActions = require('../actions/app-actions');
var AppStore = require('../stores/app-store');
var Navigation = require('react-router').Navigation;
var _ = require('lodash');
// Our custom component is managing whether the Modal is visible
const ListingDetail = React.createClass({
mixins: [Navigation],
getInitialState: function() {
console.log(this.props.data);
return {
listing: this.props.data
};
},
componentDidMount: function() {
AppStore.addChangeListener(this._onChange.bind(this));
},
_onChange : function(){
},
handleClick: function () {
this.transitionTo('/listing/apply/' + this.state.listing.id );
},
render: function () {
var data = this.state.listing;
var employmentType = 'test';
return (
<div>
<img style={{width: 200+'px', height: 200+'px'}} src="/images/job1.jpg" alt="" className="img-circle" />
<div className="title">
<h5>{data.job_title}</h5>
<p>{data.Business.business_name}</p>
</div>
</div>
);
},
});
module.exports = ListingDetail;
React 本身不提供在组件之间共享数据的方法,除非它们处于相同的组件层次结构中。只有祖先到后代的传递是由React直接提供的,通过"props"将数据从父组件传递给子组件。您还可以通过将回调(在父组件中定义的方法)作为prop传递给子组件,然后让子组件在发生变化时调用该回调并将数据作为参数传递,从而间接地将数据从子组件共享到父组件。在这里阅读更多关于呈现多个组件和数据共享的信息。
如果你的组件在完全独立的路由中呈现,就像你试图做的那样,那么你将不得不以其他方式提供数据流。React本身并没有提供这种功能,但是Flux是Facebook开发人员背后的一种方法,它明确地处理了数据流,并且非常适合React。
这类问题正是Flux被设计出来的原因。而不是试图将数据直接从一个组件传递到另一个组件,让存储保存数据。然后,当您转换到另一个组件时,该组件可以从存储区读取数据。
相关文章:
- 如何在react js中将值从一个组件发送到另一个组件
- 我的shareService在angular 2中发送值工作正常,但当我渲染我的另一个组件时,会获得默认值
- 聚合物是一个框架而不是一个库.如何模块化地使用web组件
- Angular2将组件方法导入到另一个组件中
- 有没有一个Nodejs库可以序列化和反序列化命名组件的路径(比如URL路径名)
- 如何向onClick事件处理程序传递一个接受参数的函数,并且仍然将该函数绑定到组件's”;这个“;上下文
- 如何在另一个组件中获取指令/组件实例
- Vue.js获取组件中的一个元素
- 制作一个高阶组件,用TypeScript实现反应中继和反应路由器的交互操作
- reactjs-redux,是否可以有一个由2个组件使用的状态
- 无法将react组件作为属性传递给另一个组件
- 在React中将方法从一个组件移动到另一个组件,并且仍然可以在原始组件中使用
- Angular 2,在没有直接关系的两个组件之间共享一个对象
- 在另一个文件夹中显示React组件
- 有没有一条清晰的路径,我可以实现一个在 ScalaJS + React 中广泛使用上下文的 React 组件
- 如何从一个组件访问另一个组件的状态
- 如何创建一个组件,我可以设置在 Angular 2 中的属性中获取 URL 数据
- 是否有一个 API 来控制火狐附加组件 SDK 中的下载
- Vue.js从另一个组件获取数据
- bind():您正在将一个组件方法绑定到该组件.React会自动为您执行此操作