javascript - 将子数组中的值打印到表中

Question

我有一个看起来像这样的数组:

var example = [
    {
        name: 'Alex',
        id: 1,
        jobs: [
            'potato picker',
            'spirit catcher',
            'pirate'
        ],
    },
    {
        name: 'Jonathan',
        id: 2,
        jobs: [
            'strawberry guard',
            'kings guard',
            'model'
        ],
    }
];

我在 React 中有一个表格，如下所示:

<Table striped bordered condensed hover responsive>
    <thead>
    <tr>
        <th style={{textAlign: 'center'}}>Name</th>
        <th style={{textAlign: 'center'}}>ID</th>
        <th style={{textAlign: 'center'}}>Jobs<th>
    </tr>
    </thead>
    <tbody>
    {
        exampleArr.map((user, i) => (
            <tr key={user.id}>
                <React.Fragment>
                    <td>{user.name}</td>
                    <td>{user.id}</td>
                    {
                        user.jobs.map(job => (
                            <tr><td>{job}</td></tr>
                        {/*Obviously this throws an error*/}
                        ))
                    }
                </React.Fragment>
            </tr>
        ))
    }
    </tbody>
</Table>

这或多或少是我想要的最终结果

怎样才能达到上述效果？

将<tr>作为 <td> 的 child 显然，抛出一个错误，但我认为这样的东西就是我需要的。

理论上我可以将名称和用户 ID 添加到每个作业元素中，但是有没有办法以更简单的方式做到这一点？

Answer 1

您可以输入您想要的<tr>子表中的 s:

<tbody>
 {
     exampleArr.map((user, i) => (
         <tr key={user.id}>
             <React.Fragment>
                 <td>{user.name}</td>
                 <td>{user.id}</td>
                 <table>
                     {user.jobs.map(job => (
                         <tr>
                             <td>{job}</td>
                         </tr>
                     ))}
                 </table>
             </React.Fragment>
         </tr>
     ))
 }
 </tbody>