IT技术 - 每个表格行中的语义 UI (React) 映射手风琴 - 吾爱随笔录

我正在寻找解决方案，我可以将数据映射到带有手风琴的每个表格行，通过单击它，它会扩展<div>表格行下方。

这是迄今为止我所拥有的数据到 TableRow 的映射：

 var mappedOrders = sortedOrders.map(order => {

    return (
        <Table.Row key={order._id}>
            <Table.Cell>{order.address.lastName + " " + order.address.firstName}</Table.Cell>
            <Table.Cell>{order.payment.vs}</Table.Cell>
            <Table.Cell>
                <Button onClick={this.openOrderDetails(order)} style={{ padding: '0.3em' }} size='medium' icon='edit' />
                <Button style={{ padding: '0.3em' }} size='medium' icon='check' />
                <Button style={{ padding: '0.3em' }} size='medium' icon='file pdf' />
                <Button style={{ padding: '0.3em' }} size='medium' icon='shipping fast' />
                <Button style={{ padding: '0.3em' }} size='medium' icon='close' />
            </Table.Cell>
        </Table.Row>
    )
}
)

<Table compact padded selectable basic='very'>
    <Table.Header>
        <Table.Row style={{ textAlign: 'center' }}>
            <Table.HeaderCell width={2}>Name</Table.HeaderCell>
            <Table.HeaderCell width={1}>VS</Table.HeaderCell>
            <Table.HeaderCell width={3}>Actions</Table.HeaderCell>
        </Table.Row>
    </Table.Header>
    <Table.Body>
        {mappedOrders}
    </Table.Body>
</Table>

<Table> <Table.Header> <Table.HeaderCell>Node Type</Table.HeaderCell> <Table.HeaderCell>Display</Table.HeaderCell> </Table.Header> <Accordion fluid={true} as={Table.Body} panels={this.props.visibleNodes.map(n => { return { key: n.id, class: "tr", title: { as: Table.Row, className: "", children: [ <Table.Cell key={`${n.id}_type`}>{n._node_type}</Table.Cell>, <Table.Cell key={`${n.id}_display`}>{n._display}</Table.Cell> ] }, content: { children: JSON.stringify(n.properties) } }; })} /> </Table>