如何在 reactjs 中创建自定义动态 table

Question

我试图在 reactjs 中使用 header 创建一个自定义动态 table，但不知何故它使用钩子失败了。我是 reactjs

的新手

这是我尝试过但失败的方法：

import React, { useState } from 'react';

const Servicecharges = () => {

    const [items, setitems] = useState({
        stude: [
            { "Services": "Hire Charges for Langar / Preeti Bhoj", "Charges": "£251", "Comments": "Including use of the Kitchen. Additionally all goods and materials to be supplied or purchased from the Mandir" },
            { "Services": "Preeti Bhoj (Daal, 1 Veg, Dahi, Chawal, Roti, Sweet)", "Charges": "£321", "Comments": "Additional Sabzi (£100)Plus Cleaner (£50)" },
            { "Services": "Pooja / Havan at residences (Inside Glasgow)", "Charges": "£31+", "Comments": "" },
            { "Services": "Pooja / Havan at residences (Outside Glasgow)", "Charges": "£51+", "Comments": "" },
        ]
    })

    const renderTableData = () => {
        return this.items.stude.map((stud, index) => {
            const { Services, Charges, Comments } = stud //destructuring
            return (
                <tr >
                    <td>{Services}</td>
                    <td>{Charges}</td>
                    <td>{Comments}</td>
                </tr>
            )
        })
    }
    return (
        <div>
            <h1 id='title'>React Dynamic Table</h1>
            <table id='students'>
                <tbody>
                    {this.renderTableData()}
                </tbody>
            </table>
        </div>
    );
};

export default Servicecharges;

在 App.js

中使用 Servicescharges.js

render(){
    <Servicecharges />
}

Answer 1

删除 this 关键字，因为您的组件是 功能性 组件

const renderTableData = () => {
        return items.stude.map((stud, index) => { // remove this
            const { Services, Charges, Comments } = stud //destructuring
            return (
                <tr >
                    <td>{Services}</td>
                    <td>{Charges}</td>
                    <td>{Comments}</td>
                </tr>
            )
        })
    }

return (
            <div>
                <h1 id='title'>React Dynamic Table</h1>
                <table id='students'>
                    <thead>
                     <tr>
                       <th>Services</th>
                       <th>Charges</th>
                       <th>Comments</th>
                     </tr>
                    </thead>
                    <tbody>
                        {renderTableData()} // remove this
                    </tbody>
                </table>
            </div>
        );

如何在 reactjs 中创建自定义动态 table

How create a customize dynamic table in reactjs

html

dynamic-tables

reactjs

react-hooks