问题描述
我是一个正在学习的初学者。我想做一个简单的项目,我在其中使用引导程序来制作可扩展的表格,但是当我单击可折叠的 td 时,它只会扩展和关闭而没有任何影响。我想了解发生了什么冲突。
import React,{ Fragment } from 'react';
import { Link } from 'react-router-dom';
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
import "../../node_modules/bootstrap/js/src/collapse.js";
const UserList = (props) => {
return (
<div >
<table className="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Mail</th>
<th colSpan="3" scope="col">Contacts</th>
</tr>
</thead>
<tbody>
{props.users.map((user,i) => (
<Fragment>
<tr key={i} data-toggle="collapse"
data-target={".multi-collapse" + i}
aria-controls={"multicollapseExample" + i} >
<th scope="row">{user.id}</th>
<td>{user.name}</td>
<td>{user.mail}</td>
<td>{user.contact}</td>
<td><Link type="button"
to={`edit/${user.id}`}
className="btn btn-md btn-outline-primary"
>Edit</Link></td>
<td><button className="btn btn-md btn-outline-danger" data-target={i} onClick={(event) => props.deleteUserProp(user)}>Delete</button></td>
</tr>
<tr className={"collapse multi-collapse" + i} id={"multicollapseExample" + i} >
<td colSpan="6" className="collapsible clearfix" >
<div className="coldiv" > <h4> Address:</h4><p>{user.body}</p></div>
</td>
</tr>
</Fragment>
))}
</tbody>
</table>
</div>
)
}
export default UserList;
解决方法
您遇到的问题是 bootstrap 中的动画无法在非块级元素(如 from(bucket: "my-bucket")
|> range(start: 2021-02-12T12:42:09Z,stop: 2021-02-12T12:42:10Z)
|> filter(fn: (r) => r["_measurement"] == "Pressure")
|> aggregateWindow(every: v.windowPeriod,fn: mean,createEmpty: false)
|> yield(name: "mean")
或 <td>
)上运行。它将显示和隐藏它,但动画不会运行,因为动画的工作方式取决于元素为 <tr>
。因此,您可以将 display: block
元素内的内容包装在 <td>
内,然后将 <div>
类添加到该 collapse
。
<div>