在reactjs

Question

我是reactjs的新手，因为我想知道如何在表格中呈现项目列表。

我的示例对象数组是：

[
{description:"test leave"
end_date:"2017-05-16"
id:1
name:"new year"
start_date:"2017-05-16"},

{description:"Diwali eve"
end_date:"2017-10-22"
id:2
name:"diwali"
start_date:"2017-10-22"}
]

我的代码是：

import React from 'react';
import { Router, Link , Route, Switch ,browserHistory } from 'react-router';
import {holidaydetails} from '../actions/index.jsx'
import {holidaydetailreducer} from '../reducers/holidaydetails.jsx'
import thunk from 'redux-thunk';
import ReduxPromise from 'redux-promise';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';


class HolidaysList extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            HolidayList: []
        };
    }

    componentDidMount()
    {
            this.props.holidaydetails();
            this.setState({HolidayList:this.props.holidaydetails()})

    }


    render(){
            const rows = this.props.HolidayList.holidaylist_data;
            console.log(rows,'rows implementation!!!!!');

        return(
            <div className="container">
                <div className="row">
                    <div className="margin">
                        <div className="col-md-12">
                            <div className="main_content">
                                <div className="row">
                                    <div className="col-md-12">
                                        <div className="row">
                                            <div className="col-sm-12" data-offset="0">
                                                <div className="panel panel-info">
                                                    <div className="panel-heading">
                                                        <div className="panel-title">
                                                            <strong>List of All Events</strong>
                                                        </div>
                                                    </div>
                                                    <table className="table table-bordered table-hover" id="dataTables-example">
                                                        <thead>
                                                            <tr>
                                                                <th>SL.NO</th>
                                                                <th className="col-sm-3">Event Name</th>
                                                                <th className="col-sm-1">Start Date</th>
                                                                <th className="col-sm-1">End Date</th>
                                                                <th>Description</th>
                                                                <th className="col-sm-1">Action</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

function mapStateToProps(state,props) {
    console.log(state,'state in holidaylist')
  return {
    HolidayList: state
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    holidaydetails: holidaydetails}, dispatch);
}



export default connect(mapStateToProps, mapDispatchToProps)(HolidaysList);

在上面的代码中，我有rows对象，其中包含数组中的所有对象列表。

提前致谢，
任何帮助表示赞赏。

Answer 1

试试这个

 render() {

          return (
      <table>
           <tbody>{this.state.todos.map((todo, i) => <Todo key={i} todos= {todo} />)}</tbody>
         </table>
     );
       }

Todo组件

class Todo扩展了React.Component {

   render() {

      return (
            <tr>
            <td>{this.props.todos.id}</td>
            <td>{this.props.todos.name}</td>
            <td>{this.props.todos.company}</td>
         </tr>
      );
   }
}

导出默认Todo;

Answer 2

您需要映射数据，例如

<tbody>

{rows && rows.map((holiday) => {
     return <tr key={holiday.id}>
                <td>{holiday.id}</td>
                <td>{holiday.name}</td>
                <td>{holiday.start_date}</td>
                <td>{holiday.end_date}</td>
                <td>{holiday.description}</td>
                <td><button onClick={() => this.someAction(param)}>Action</button></td>
            </tr>
})}
</tbody>