React JS中动态表格列与对应数据渲染的实现问题

问题说明 #

可以在React中实现动态列及对应数据的渲染，你的思路是可行的，但代码存在一处关键问题导致表格内容无法正常显示。以下是你的原始代码：

原始组件代码 #

var cols = ["Id", "Name"];
const generateData = () => {
    var testArr = [];
    for (let i = 0; i < 100; i++) {
        testArr.push({ Id: i + 1, Name: names[Math.round(Math.random() * 10)] });
    }
    return testArr;
}

import { Table } from "reactstrap";

function dynamicTables(props) {
    return (
        <Table className="align-items-center table-flush" responsive>
            <thead className="thead-light">
                <tr>
                    {
                        props.cols.map((item, key) => (
                            <th key={key}>{item}</th>
                        ))
                    }
                </tr>
            </thead>
            <tbody>
                {
                    props.data.map((item, key) => (
                        <tr key={key}>
                            {
                                props.cols.map((col) => {
                                    <td>{item[col]}</td>
                                })
                            }
                        </tr>
                    ))
                }
            </tbody>
        </Table>
    );
}

export default dynamicTables;

组件调用代码 #

<dynamicTables data={generateData()} cols={cols}></dynamicTables>

问题修复 #

你的代码中，<tbody>内部的props.cols.map回调函数没有返回<td>元素，导致表格内容无法渲染。同时建议优化key值的使用，避免React渲染警告。有两种修复方式：

方式1：添加return语句 #

props.cols.map((col) => {
    return <td key={col}>{item[col]}</td>
})

方式2：使用箭头函数隐式返回（更简洁） #

props.cols.map((col) => (
    <td key={col}>{item[col]}</td>
))

修正后的完整组件代码 #

import { Table } from "reactstrap";

function dynamicTables(props) {
    return (
        <Table className="align-items-center table-flush" responsive>
            <thead className="thead-light">
                <tr>
                    {props.cols.map((col) => (
                        <th key={col}>{col}</th>
                    ))}
                </tr>
            </thead>
            <tbody>
                {props.data.map((row, rowKey) => (
                    <tr key={rowKey}>
                        {props.cols.map((col) => (
                            <td key={col}>{row[col]}</td>
                        ))}
                    </tr>
                ))}
            </tbody>
        </Table>
    );
}

export default dynamicTables;

补充提示 #

• 确保names数组已提前定义，否则generateData函数会出现引用错误
• React组件命名建议使用大驼峰格式（如DynamicTables），符合官方规范

内容的提问来源于stack exchange，提问作者Shahzaib Saleem