reactjs - validateDOMNesting(...) 反应中的警告

Question

我想在引导类的帮助下创建一个可折叠的表，我成功地创建了它，但是在控制台中，我收到了这个警告：

validateDOMNesting(...):<div>不能作为子级出现<td>

我的代码：

<table className="table table-hover order_details_table">
      <thead>
        <tr>
          <th scope="col">Order ID</th>
          <th scope="col">Person Name</th>
          <th scope="col">Order Date</th>
          <th scope="col">Order Amount</th>
        </tr>
      </thead>
      <tbody>
        {data?.map((order) => {
          return (
            <Fragment key={order.id}>
              <tr
                data-bs-toggle="collapse"
                data-bs-target={`#${order.name}`}
                aria-expanded="false"
                aria-controls={order.name}
              >
                <th scope="row">{order.id}</th>
                <td>{order.name}</td>
                <td>{order.date}</td>
                <td>{order.amount}</td>
              </tr>
              <tr>
                <td colSpan="4" className="table_collapse">
                  <div className="collapse" id={order.name}>
                    <div style={{ padding: "20px" }}>
                      Some placeholder content for the collapse component. This
                      panel is hidden by default but revealed when the user
                      activates the relevant trigger.
                    </div>
                  </div>
                </td>
              </tr>
            </Fragment>
          );
        })}
      </tbody>
    </table>

现在我的问题是：

1) Is it safe to ignore this warning?
2) If not then what to modify here to fix it?

标签： reactjsbootstrap-4react-bootstrapreact-bootstrap-table