将数据从一个组件传递到另一个组件中反应

我有一个组件，我试图在单击它时将数据传递给以前的组件。我试过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我想要的路线，但我怎么打发this.listings数据时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;

来源

2015-07-10 rahul2001

你的组件都没有渲染另一个组件。 – Rishabh

如何渲染并将此列表传递给来自JobOffer的ListingDetail – rahul2001

@ rahul2001可能值得关注此https://facebook.github.io/react/docs/multiple-components.html应该为您明确 – knowbody

这种类型的问题就是为什么通量设计。不要试图直接将数据从一个组件传递到另一个组件，而是让商店保存该数据。然后，当您转换到另一个组件时，该组件可以从商店读取数据。

来源

2015-07-13 00:51:12

反应本身没有提供在组件之间共享数据的方法，除非它们处于相同的组件层次结构中。直接通过React提供祖先到后代的传递，通过将数据从父组件通过“道具”传递给子组件。您还可以通过将回调（在父级中定义的方法）作为通道传递给子级，然后让子组件在某些事件发生更改并将数据作为参数传递时调用该回调，从而间接将数据从子级共享给父级。详细了解渲染多个组件和数据共享here。

如果您的组件正在以完全独立的路线呈现，就好像您正在尝试这样做，那么您将不得不以其他方式提供数据流。 React本身并没有提供这个功能，但Flux是Facebook的开发人员在后面明确处理数据流的一种方法，它对React非常好。

来源

2015-07-13 11:25:06

将数据从一个组件传递到另一个组件中反应

回答

相关问题