javascript - 显示状态更改和 for 循环 React js 的不同组件

Question

我正在开始使用react js，我面临两个问题。

1)我试图显示一个不同类别的表格，通过单击“显示”按钮，应该显示一个表格。问题是，即使显示表格的状态为 true，表格也不会显示。

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 来查看里面的内容，但我的代码甚至没有显示新类来显示表格。

这是代码。

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

当你创建一个以小写字母开头的 react 组件时，它们会被视为 HTML 元素，在这种情况下你的组件将不会被渲染，所以它的规则是所有 React 组件都必须以大写字母开头，因此请始终使用大写字母。

使用TableView代替tableview。

您粘贴到 ques 中的另一件事数据表明您的数据不是数组，它是一个带有键 1、2、3、4、5、6 的对象:

对象{1:对象，2:对象，3:对象，4:对象，5:对象，6:对象}

要使用 map ，应该像这样:

[{}、{}、{}、{}...]

或者如果您的数据是这样的，那么您需要在对象的键上使用映射，如下所示:

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

当您使用 Object.keys() 时，它将返回所有键的数组:[1,2,3,4,5,6]。

之后你就可以使用 map 了。

使用数据作为对象检查工作代码:

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及其含义:

当我们使用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);