將數據從一個組件傳遞到另一個組件中反應

我有一個組件，我試圖在單擊它時將數據傳遞給以前的組件。我試過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

將數據從一個組件傳遞到另一個組件中反應

回答

相關問題