Question

我开始使用react js，我遇到了2个问题。

1）我试图通过点击show按钮显示一个不同类的表，一个表应该出现。问题是，即使状态为显示表，该表也不会显示。

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。

你在问题中粘贴的另一件事表明你的数据不是一个数组，它是一个带有键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]。

之后你可以使用地图。

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

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

在状态变化和循环React js上显示不同的组件

1 个答案: