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

把<Plan />放在那里。

Answer 2

有点难以理解你在寻找什么，而且是这样的东西太多的代码......我花了一段时间才找到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>