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

Question

我有一個組件，當我單擊該組件時，我試圖將數據傳遞給該組件。 我已經嘗試過setState來更改狀態，但是什么也沒用。 如何傳遞數據？ 數據存在於此列表中

這是第一個組件：

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時如何傳遞this.listings數據？

這是我要傳遞給的組件：

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;

Answer 1

除非它們在同一組件層次結構中，否則React 本身不會提供在組件之間共享數據的方法。 通過將數據從父組件通過“ props”傳遞到子組件，React只能直接提供祖先到后代的傳遞。 您還可以通過將回調（作為父級中定義的方法）作為道具傳遞給子級，然后讓子級組件在發生某些更改時將回調傳遞給子級，然后將數據作為參數傳遞，從而間接地將數據從子級共享給父級。 在此處閱讀有關渲染多個組件和數據共享的更多信息。

如果您的組件是在完全獨立的路徑中呈現的，就像您正在嘗試做的那樣，那么您將不得不以其他方式提供數據流。 React本身不提供此功能，但是Flux是Facebook開發人員落后的一種方法，它明確地處理數據流，並且非常適合React。

Answer 2

正是這種類型的問題正是設計Flux的原因。 與其嘗試直接將數據從一個組件傳遞到另一個組件，不如讓存儲來保存該數據。 然后，當您過渡到另一個組件時，該組件可以從存儲中讀取數據。