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>的子项中会引发错误，但是我认为这是我所需要的。

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

Answer 1

您是否真的需要新行，还是可以将其包含在一个单元格中？

如果您可以将其放在单个单元格中，请将每个作业包装在div中，以便将其显示为块。

       delete_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(validate(v)) {
                    deleteProduct();
                }
            }
        });

Answer 2

您可以将所需的$(function() { var coll = document.getElementsByClassName("collapsible"); //setting buttons of class 'collapsible' to extend on click for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function () { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); } });放在子表中：

<tr>

将值从子数组打印到表

2 个答案: