Question

我正在学习反应，并且我试图弄清楚如何将这些信息放入表中。我知道有

<table></table>

在HTML中

所以我假设我会在javascript中使用类似的东西。我试图创建一个表格，其中生日那个月包含每个人的姓名和日期。

任何建议/帮助都会很棒！

    class App extends React.Component {
          constructor(props) {
            super(props);

            this.state = {
              birthdays: {
                'January': [{
                  name: 'Mike',
                  date: '1/14/90'
                }, {
                  name: 'Joe',
                  date: '1/7/92'
                }],

                March: [{
                  name: 'Mary',
                  date: '3/7/88'
                }]
              }
            }
          }

          render() {
            return ( 
               <div>
                {Object.keys(this.state.birthdays).reduce((birthdays, month) => {
                  return birthdays.concat(this.state.birthdays[month].map((bday) => {
                     return (
                        <p>{bday.name} - {bday.date}</p>
                );
            }));
        }, [])}
      </div>
    );
}
ReactDOM.render(<App />, 
document.getElementById('container'));

请原谅代码的格式。

Answer 1

您通过添加jsx代码来使用javascript html的扩展名，这意味着您可以在javascript代码中使用它们。 / p>

您需要在迭代生日之前打开<table>标记，以便在其中创建<tr>（行）。

return <table>
  {
    birthdays.map((bday) => (
      <tr>
        <td>{bday.name}</td>
        <td>{bday.date}</td>
      </tr>
    );
  }
</table>

我建议您详细了解table elements in html。

Answer 2

您需要首先映射键，然后迭代生日对象。同时在March上添加单引号，例如'March'

＆＃13;

class App extends React.Component {
          constructor(props) {
            super(props);

            this.state = {
              birthdays: {
                'January': [{
                  name: 'Mike',
                  date: '1/14/90'
                }, {
                  name: 'Joe',
                  date: '1/7/92'
                }],

                'March': [{
                  name: 'Mary',
                  date: '3/7/88'
                }]
              }
            }
          }
           renderTableRows =  () => {
           var rows = [];
           Object.keys(this.state.birthdays).forEach((month, key) => {              var birthdays = this.state.birthdays[month];
               birthdays.forEach((obj) => {
            
            rows.push (
              <tr>
              <td>{month}</td>
              <td >{obj.name}</td>
              <td>{obj.date}</td>
              </tr>
            )
            
            })

          })
          var tby = null;
             tby = <tbody>
                     {rows.map((obj, key) => {
                        return (
                          obj
                        )
                     })}
                   </tbody>
          return tby;
           
           }
          render() {
            return ( 
               <div>
                <table className="table table-striped">
                  <thead>
                  <tr>
                    <th>Month</th>
                    <th>Name</th>
                    <th>Date</th>
                  </tr>
                   </thead>
                  
                  
                {this.renderTableRows()}
        </table>
      </div>
    );
}
}
ReactDOM.render(<App />, 
document.getElementById('container'));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<div id="container"></div>

＆＃13;

Answer 3

展示您的数据的一种方式可能如下：http://codepen.io/PiotrBerebecki/pen/jrVkdO

以下是React组件类的代码：

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      birthdays: {
        'January': [{
          name: 'Mike',
          date: '1/14/90'
        }, {
          name: 'Joe',
          date: '1/7/92'
        }],

        March: [{
          name: 'Mary',
          date: '3/7/88'
        }]
      }
    }
  }

  render() {
    console.log();
    return (
      <table>   
        <thead>
          <th>
            <td>Month</td>
            <td>Name</td>
            <td>Birthday</td>
          </th>
        </thead>
        <tbody>
        {Object.keys(this.state.birthdays).map((month, key) => {
          return (     
            <tr key={key}>
              {this.state.birthdays[month].map((person, index) => {
                return (
                  <tr key={String(key) + String(index)}>
                    <td>{month}</td>
                    <td>{person.name}</td>
                    <td>{person.date}</td>
                  </tr>
                );
              })} 
            </tr>         
          )
        })}
        </tbody>
      </table>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

你如何在reactjs中创建一个完整的html表？

3 个答案: