显示数据得到了来自JSON在Reactjs表

在这里，我写了从API http://fcctop100.herokuapp.com/api/fccusers/top/recent获取数据，并在形式上表，下面看起来像我的情况下，你可以看到显示数据的代码重复对于每个显示数据得到了来自JSON在Reactjs表

但我想使它看起来像

这里是我做了这么远

var MainBox = React.createClass({ 
 
    render:function(){ 
 
     return(
 
      <App/> 
 
     ); 
 
    } 
 
}); 
 
var App = React.createClass({ 
 
    //setting up initial state 
 
    getInitialState:function(){ 
 
     return{ 
 
      data:[] 
 
     }; 
 
    }, 
 
    componentDidMount(){ 
 
     this.getDataFromServer('http://fcctop100.herokuapp.com/api/fccusers/top/recent'); 
 
    }, 
 
    //showResult Method 
 
     showResult: function(response) { 
 

 
      this.setState({ 
 
       data: response 
 
      }); 
 
    }, 
 
    //making ajax call to get data from server 
 
    getDataFromServer:function(URL){ 
 
     $.ajax({ 
 
      type:"GET", 
 
      dataType:"json", 
 
      url:URL, 
 
      success: function(response) { 
 
       this.showResult(response); 
 
      }.bind(this), 
 
      error: function(xhr, status, err) { 
 
       console.error(this.props.url, status, err.toString()); 
 
      }.bind(this) 
 
     }); 
 
    }, 
 
    render:function(){ 
 
     return(
 
      <div> 
 
       <Result result={this.state.data}/> 
 
      </div> 
 
     ); 
 
    } 
 
}); 
 
var Result = React.createClass({ 
 
    render:function(){ 
 
     var result = this.props.result.map(function(result,index){ 
 
      return <ResultItem key={index} user={ result } /> 
 
      }); 
 
     return(
 
      <div> 
 
       {result} 
 
      </div> 
 

 
     ); 
 
    } 
 
}); 
 
var ResultItem = React.createClass({ 
 
    render:function(){ 
 
     var camper = this.props.user; 
 
     return(
 
       <div className="row"> 
 
        <div className="col-md-12"> 
 
         <table className="table table-bordered"> 
 
          <thead> 
 
          <tr> 
 
           <th className="col-md-4">UserName</th> 
 
           <th >Points In Last 30 Days</th> 
 
           <th>Points All Time</th> 
 
          </tr> 
 
          </thead> 
 
          <tbody> 
 
          <tr > 
 
           <td>{camper.username}</td> 
 
           <td>{camper.recent}</td> 
 
           <td>{camper.alltime}</td> 
 
          </tr> 
 
          </tbody> 
 
         </table> 
 
        </div> 
 
       </div> 
 

 
     ); 
 
    } 
 
}); 
 
ReactDOM.render(
 
    <MainBox />, 
 
    document.querySelector("#app") 
 
);

<!DOCTYPE html> 
 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title>React Tutorial</title> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<div id="app"></div> 
 
<script src="demo.js" type="text/babel"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> 
 
</body> 
 
</html>

来源

2016-03-03 user5323957

以下应该列出所有项目作为表中的单个行，并且只给你一个表。一个提示是不要使用索引作为您的地图功能的关键。最好在结果中使用一些自然键或标识符，某种类型的ID可以使React更好地比较组件。 A blog post describing this和一些documentation。

var Result = React.createClass({ 
    render:function(){ 
     var result = this.props.result.map(function(result,index){ 
      return <ResultItem key={index} user={ result } /> 
      }); 
     return(
      <div className="row"> 
       <div className="col-md-12"> 
        <table className="table table-bordered"> 
         <thead> 
          <tr> 
           <th className="col-md-4">UserName</th> 
           <th >Points In Last 30 Days</th> 
           <th>Points All Time</th> 
          </tr> 
         </thead> 
         <tbody> 
          {result} 
         </tbody> 
        </table> 
       </div> 
      </div> 
     ); 
    } 
}); 
var ResultItem = React.createClass({ 
    render:function(){ 
     var camper = this.props.user; 
     return(
      <tr > 
       <td>{camper.username}</td> 
       <td>{camper.recent}</td> 
       <td>{camper.alltime}</td> 
      </tr> 
     ); 
    } 
});

来源

2016-03-03 06:38:31

是的，它是更清洁和更清晰的这种方式感谢你 – user5323957

我给你一个迟来的投票，因为这帮助我基于JSON数据的表。 –

显示数据得到了来自JSON在Reactjs表

回答

相关问题