は、状態変化とループのための異なるコンポーネントを示しています。React js

Question

私はreact jsを使い始めています。私は2つの問題に直面しています。

1）別のクラスにあるテーブルを表示しようとしていますが、表示ボタンをクリックするとテーブルが表示されます。問題は、表を表示するために状態が真であっても表が表示されないことです。テーブルで

2）私はこの

Object {1: Object, 2: Object, 3: Object, 4: Object, 5: Object, 6: Object} 

1 capital_payment :"100", 
    currency: "2" 
    dudedate : "2017-08-20" 

などの情報を持つ配列を渡しています。しかし、私は、forループを使用し、それらの情報をレンダリングするかどうかはわかりません。私はconsole.logを使って内部の内容を見ていますが、コードを見てもテーブルを表示するために新しいクラスが表示されるまではありません。

ここにコードがあります。

あなたが始まる小さな文字で reactコンポーネントを作成するとき、彼らはそのすべて Reactコンポーネントのルールは大文字で始まる必要がありますので、あなたのコンポーネントが、その場合にはレンダリングされ得ることはありません、 HTML要素として扱われ

var Heading = React.createClass({ 
    getInitialState: function() { 
     return { 
     data : [], 
     amount : 1000, 
     firstMonth : 0, 
     showtable : false <--------- HERE IS THE SHOW TABLE STATE 
     }; 
    }, 
    showTable : function(){ 
     console.log('I am here'); 
     this.setState({showtable : !this.state.showtable}); <----CHANGING STATE HERE 
     console.log(this.state.showtable); 
    }, 
    render : function(){ 
     var amount = this.state.amount; 
     var firstMonth = this.state.firstMonth; 
     return(
     <div className="container"> 
      <div className="row"> 
      <div className="col-xs-4 col-xs-offset-4"> 
       <div className="form-group"> 
       <label>How much <span>{amount}</span> </label> 
       <input type="text" className="form-control" placeholder="Amount" value={amount} onChange={this.handleChange} /> 
       </div> 
       <button type="submit" className="btn btn-success" onClick={this.loadCommentsFromServer} >Submit</button> 
       <button type="submit" className="btn btn-success" onClick = {this.showTable} > Show table </button> 
       <hr /> 
      <!--- HERE IS WHERE THE NEW CLASS SHOULD SHOW UP IF TABLE IS CHANGED --> 
       { this.state.showtable ? <tableView data={this.state.data}/> : null } 
      </div> 
      </div> 
     </div> 
    ); 
    } 
}); 
// HERE IS THE TABLEVIEW, AND I HAVE NO CLUE HOW TO DO A FOR LOOP TO RENDER INFORMATION TO THE TABLE 
var tableView = React.createClass({ 
    render: function() { 
     console.log(this.props.data); 
     return (
      <table className="table"> 
      <thead> 
       <tr> 
       <th>amount</th> 
       <th>duedate</th> 
       <th>currency</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
       <!-- Need to know how the forloop is done, is there a easier way? --> 
       {this.props.data.map(function(info) { 
       return (
        <tr key={info}> 
        {info.capital_payment}, 
        {info.currency}, 
        {info.duedate} 
        </tr> 
       ); 
       })} 
       </tr> 
      </tbody> 
      </table> 
     ); 
    } 
}); 


ReactDOM.render(
    <div> 
    <Heading 
    name="React JS" 
    > 
    </Heading> 
    <tableView /> 
    </div> 
, document.getElementById('reactBinding')); 

Answer 1

、常に大文字を使用してください。

tableviewの代わりにTableViewを使用してください。

あなたがQUESに貼り付けられたもう一つのデータは、あなたのデータは、キー1、2、3、4、5、6の配列、そのオブジェクトではないことを示した：へ

Object {1: Object, 2: Object, 3: Object, 4: Object, 5: Object, 6: Object}

[{}, {}, {}, {}...]

をしたり、データがだけにして、このようであれば、あなたはこのように、objectのキーにマップを使用する必要があります：マップを使用するには、このようにする必要があり

Object.keys(this.props.data).map((key,i)=>{ 
    console.log(this.props.data[key]) 
}) 

Object.keys（）を使用すると、すべてのキーの配列[1,2,3,4,5,6]が返されます。

その後、マップを使用することができます。

オブジェクトとしてデータを扱うコードを確認してください：

Object.keysとその意味を使用する方法

var Heading = React.createClass({ 
 
    getInitialState: function() { 
 
     return { 
 
     data : {1: {a:1,b:1,c:1}, 2: {a:2,b:2,c:2}, 3:{a:3,b:3,c:3}}, 
 
     amount : 1000, 
 
     firstMonth : 0, 
 
     showtable : false 
 
     }; 
 
    }, 
 
    showTable : function(){ 
 
     this.setState({showtable : !this.state.showtable}); 
 
    }, 
 
    render : function(){ 
 
     var amount = this.state.amount; 
 
     var firstMonth = this.state.firstMonth; 
 
     return(
 
     <div className="container"> 
 
      <div className="row"> 
 
      <div className="col-xs-4 col-xs-offset-4"> 
 
       <div className="form-group"> 
 
       <label>How much <span>{amount}</span> </label> 
 
       <input type="text" className="form-control" placeholder="Amount" value={amount} onChange={this.handleChange} /> 
 
       </div> 
 
       <button type="submit" className="btn btn-success" onClick={this.loadCommentsFromServer} >Submit</button> 
 
       <button type="submit" className="btn btn-success" onClick = {this.showTable} > Show table </button> 
 
       <hr /> 
 
       { this.state.showtable ? <TableView data={this.state.data}/> : null } 
 
      </div> 
 
      </div> 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 

 
var TableView = React.createClass({ 
 
    render: function() { 
 
     let data = this.props.data; 
 
     return (
 
      <table className="table"> 
 
      <thead> 
 
       <tr> 
 
       <th>amount</th> 
 
       <th>duedate</th> 
 
       <th>currency</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       {Object.keys(data).map((key) =>       { 
 
       return (
 
        <tr key={key}> 
 
        <td> a: {data[key].a} </td> 
 
        <td> b: {data[key].b} </td> 
 
        <td> c: {data[key].c} </td> 
 
        </tr> 
 
       ); 
 
       })} 
 
      </tbody> 
 
      </table> 
 
     ); 
 
    } 
 
}); 
 

 

 
ReactDOM.render(
 
    <div> 
 
    <Heading 
 
    name="React JS" 
 
    > 
 
    </Heading> 
 
    </div> 
 
, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'></div>

：

我々はObject.keysを使用する場合、それはその配列を返します。そのオブジェクトのすべてのキーが含まれています。このスニペットを実行し、出力を確認してください。

obj = {a:1 , b:2 , c:3 , d:4}; 
 

 
keys = Object.keys(obj); 
 

 
console.log('keys', keys); 
 

 
values = Object.values(obj); 
 

 
console.log('values', values);