如何基于数据对象的值在Table组件中渲染自定义组件？

核心问题原因 #

• 你定义的componentToRender方法没有返回值：方法内部执行了map遍历，但没有把遍历结果返回，函数默认返回undefined，因此单元格没有内容渲染。
• 表格渲染结构逻辑错误：你在单个<tr>标签内遍历列配置，每一列返回所有行的<td>，如果后续有多条数据会直接导致表格结构错乱。同时componentToRender的入参设计不合理，不需要传入整个行数组，只需要传入当前遍历到的单条行数据即可。
• JSX内使用了原生JS的单行注释//，这类注释没有包裹在{}中会直接被渲染为页面文本，需要修正。

修改后的完整代码 #

const Table = () => {
    const data= [
        {
            id: 1,
            avatar: 'blah blah blah',
            fullName: 'Arlan Pond',
            email: 'apond0@nytimes.com',
            country: 'Brazil',
            registerDate: '1/11/2021',
            status: 'active',
        },
        // 可以直接加更多行数据，不需要修改其他逻辑
        {
            id: 2,
            avatar: 'test avatar',
            fullName: 'Test User',
            email: 'test@test.com',
            country: 'China',
            registerDate: '2/11/2021',
            status: 'inactive',
        }
    ];

    const cols = [
        {
            title: 'ID',
            // 入参改为单条行数据，增加return返回单元格节点
            componentToRender(row) {
                return <td>{row.id}</td>;
            },
        },
        {
            title: 'Avatar',
            componentToRender(row) {
                return <td><span>{row.avatar}</span></td>;
            },
        },
        // 扩展其他列非常方便
        {
            title: '姓名',
            componentToRender(row) {
                return <td><p>{row.fullName}</p></td>;
            },
        },
        {
            title: '邮箱',
            componentToRender(row) {
                return <td><a href={`mailto:${row.email}`}>{row.email}</a></td>;
            },
        }
    ];

    return (
        <div className='table-responsive' style={{width: '95%'}}>
            <table className='table table-borderless'>
                <thead>
                    <tr>
                        {/* JSX注释需要用大括号包裹 */}
                        {cols.map((el, index) => {
                            return <th key={index}>{el.title}</th>;
                        })}
                    </tr>
                </thead>
                <tbody>
                    {/* 先遍历所有行数据，每行生成一个tr */}
                    {data.map((row, rowIndex) => (
                        <tr key={rowIndex} className='table-row'>
                            {/* 每行内遍历列配置，调用对应渲染方法生成td */}
                            {cols.map((col, colIndex) => {
                                return col.componentToRender(row);
                            })}
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
};

主要修改点说明 #

1. 修正了componentToRender的返回值问题，所有渲染方法都返回对应单元格节点
2. 调整了表格体的渲染逻辑：先遍历数据源生成每行的<tr>，再在每行内遍历列配置生成对应单元格，支持任意数量的行数据
3. 简化了componentToRender的入参，仅传入当前行数据，扩展新列时只需要在cols数组新增配置即可，不需要修改其他逻辑
4. 修正了JSX内的注释写法，避免注释被渲染为页面文本

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