zeigt eine andere Komponente auf Zustandsänderung und für Schleife Reagieren js

Question

Ich bin mit der Reaktion js beginnen, und ich habe 2 Probleme.

1) Ich versuche, eine Tabelle zu zeigen, die in einer anderen Klasse ist, indem Sie auf die Schaltfläche Anzeigen klicken, sollte eine Tabelle angezeigt werden. Das Problem ist, dass die Tabelle nicht angezeigt wird, selbst wenn der Status zum Anzeigen der Tabelle wahr ist.

2) In der Tabelle I mit Informationen ein Array bin vorbei wie dies

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

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

Aber ich bin nicht sicher, wie eine for-Schleife verwenden und diese Informationen zu machen. Ich verwende eine console.log, um zu sehen, was drin ist, aber mein Code geht nicht, bis die neue Klasse angezeigt wird, um die Tabelle anzuzeigen.

Hier sind die Codes.

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

Wenn Sie eine react Komponente mit Kleinbuchstaben beginnen, schaffen sie als HTML Elemente behandelt werden, wird die Komponente in diesem Fall nicht gemacht bekommen, so dass ihr eine Regel, dass alle React Komponenten müssen beginnt mit einem Großbuchstaben Verwenden Sie immer Großbuchstaben.

statt tableviewTableView verwenden.

Eine weitere Sache, Daten, die Sie in ques eingefügt, zeigten, dass Ihre Daten nicht ein Array, der ein Objekt mit den Tasten 1, 2, 3, 4, 5, 6:

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

zu verwenden Karte sollte es so aussehen:

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

oder wenn Sie Daten wie diese ist nur dann brauchen Sie Karte auf den Tasten der object, wie diese verwenden:

Wenn Sie Object.keys() verwenden, wird ein Array aller Schlüssel zurückgegeben: [1,2,3,4,5,6].

Danach können Sie Karte darauf verwenden.

den Arbeitscode mit Daten als Objekt prüfen:

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>

Wie Object.keys und seine Bedeutung verwenden:

Wenn wir Object.keys verwenden es gibt einen Array, dass enthält alle Schlüssel dieses Objekts. Führen Sie dieses Snippet und überprüfen Sie die Ausgabe:

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);