React JS-在另一個組件中渲染一個組件

Question

我是React的新手，請原諒我的草率。 我有兩個對api的異步調用，並且試圖顯示從另一個組件中的一個組件返回的數據。

這是對api進行異步調用的第一個組件：

      var Program = React.createClass({
      getInitialState: function(){
          return{
              data: []
          };
      },
      componentDidMount(){
          this.getDataFromServer('https://api.myjson.com/bins/5bdb3');
      },
      displayResponse: function(response) {
        this.setState({
          data: response
        })
      },
      getDataFromServer: function(url){
          $.ajax({
              type: 'GET',
              dataType: 'json',
              url: url,
              success: function(response, i) {
                this.displayResponse(response)
              }.bind(this)
          });
      },
      render: function() {
        var size = 3; // only show top 3 results
        var list = this.state.data;
        var result = list.slice(0, size).map(function(result, i) {
          return <ProgramItem key={ i } course={ result } index={ i } />
        });
        return (
          <div>{ result }</div>
        );
      }
  });

  var ProgramItem = React.createClass({
    render: function() {
      var course = this.props.course;
      return (
        <div className="charts-block">
          <div className="top-section">
            <div className="charts-block-title">
              <p className="title">{ course.Name }</p>
              <button className="edit-ico"><i className="fa fa-pencil"></i></button>
            </div>
            <p>Sales by month</p>
            <div className="charts">
              <img src="images/graph.png" alt="Stats Chart" />
            </div>
          </div>
          <div className="stats-list-wrapper parent-show-more">
            <table className="stats-table header">
              <tr>
                <th colSpan={ 2 } style={{ textAlign: 'right' }}>Current</th>
                <th>1 - Year</th>
              </tr>
              <tr>
                <td>Total Monlthy Sales</td>
                <td className="monthly-sales">{ course.TotalMonthlySales }</td>
                <td><img src="images/spark_line.png" alt="Stats Spark Line" /></td>
              </tr>
            </table>
            <div className="show-more-table">
              <div className="stats-table plans-table">
                <div>
                  <div>Price Name</div>
                  <div>Current</div>
                  <div>1 - Year</div>
                </div>
                <div className="planInfo">-- Data From other Component here --</div>
              </div>
            </div>
            <div className="click-more-row">
              <span>more</span>
            </div>
          </div>
        </div>
      );
    }
  });

在<div class="planIfno">內部，我想在這里從第二個組件“注入”數據：

      var Plan = React.createClass({
      getInitialState: function(){
          return{
              data: []
          };
      },
      componentDidMount(){
          this.getDataFromServer('https://api.myjson.com/bins/47axv');
      },
      displayResponse: function(response) {
        this.setState({
          data: response
        })
      },
      getDataFromServer: function(url){
          $.ajax({
              type: 'GET',
              dataType: 'json',
              url: url,
              success: function(response, i) {
                this.displayResponse(response)
              }.bind(this)
          });
      },
      render: function() {
        var size = 7; // only show top 3 results
        var list = this.state.data;
        var result = list.slice(0, size).map(function(result, i) {
          return <PlanItem key={ i } plan={ result } index={ i } />
        });
        return (
          <div>{ result }</div>
        );
      }
    });

    var PlanItem = React.createClass({
      render: function() {
        var plan = this.props.plan;
        return (
          <tr>
            <td>{ plan.Name }</td>
            <td>{ plan.Sales }</td>
            <td></td>
          </tr>
        );
      }
    });

任何方向都非常適合！

Answer 1

這是一種很難理解你在找什么， 有這樣的事情太多了代碼...我花了一段，甚至找到在哪里planIfno [原文]為

我認為您正在尋找的是var Plan = React.createClass(...)您可以在代碼的其他部分使用它，例如<Plan plan={{Name: "something", Sales: 10 }}/> 。

每個組件將處理它們可能/可能不具有的任何異步代碼。

最終看起來像

<div className="planInfo">
  {/* hardcoded plan, but you could just as easily pass in `plan={plan}` */}
  <Plan plan={{Name: "something", Sales: 10 }}/> 
</div>

Answer 2

只需在其中放置<Plan /> 。