时间戳

首页 > 解决方案 > 从 react-bootsrap 崩溃不起作用

javascript - 从 react-bootsrap 崩溃不起作用

问题描述

我正在尝试使用来自 react-bootstrap的 Collapse 创建一个可折叠的表格行。

我想创建在单击时展开和折叠的表格行，以便我可以显示有关该特定行的更多信息。

在 react-bootstrap 页面上它似乎可以工作，但是当我复制它以使用 a 而不是 a 它停止工作。这是我的代码：

import React, { useState } from 'react';
import Collapse from 'react-bootstrap/Collapse';
import Table from "react-bootstrap/Table";

function OppTable (props) {
    const [open, setOpen] = useState(false);

    return (
      <>
      <Table
      striped bordered hover
      onClick={() => setOpen(!open)}
      aria-controls="example-collapse-text"
      aria-expanded={open}>

        <thead>
            <tr>
                <th>Name</th>
                <th>City</th>
                <th>Last visited</th>
                <th>Visits</th>
                <th>FTE</th>
            </tr>
        </thead>

        <tbody>
        {
            props.opportunities.map(opportunity => {
                return (
                    <>      
                        <tr onClick={() => setOpen(!open)} aria-controls="example-collapse-text" aria-expanded={open}>
                            <td>{opportunity.companyname}</td>
                            <td>{opportunity.city}</td>
                            <td>{opportunity.lastVisit}</td>
                            <td>{opportunity.totalVisits}</td>
                            <td>{opportunity.employees}</td>
                        </tr>
                        <Collapse>
                            <tr id="example-collapse-text">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
                                terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
                                labore wes anderson cred nesciunt sapiente ea proident.
                            </tr>
                        </Collapse>
                    </>
                )

            })
        }
        </tbody>
      </Table>
      </>
    );
  }

export default OppTable;

有谁知道我做错了什么？

标签： javascriptreactjsreact-bootstrap

解决方案

缺少表的导入语句，您正在使用表，但您没有从 react-bootstrap 导入表

从“react-bootstrap/Table”导入表；

import React, { useState } from 'react';
import Collapse from 'react-bootstrap/Collapse';
// import Button from "react-bootstrap/Button";
import Table from "react-bootstrap/Table";

function Example() {
  const [open, setOpen] = useState(false);

  return (
      <div>
          <Table
              striped bordered hover
              onClick={() => setOpen(!open)}
              aria-controls="example-collapse-text"
              aria-expanded={open}
          >
            <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Jacob</td>
            </tr>
            <tr>
              <td>3</td>
              <td colSpan="2">Larry the Bird</td>

            </tr>
            </tbody>
          </Table>

        <Collapse in={open}>
          <div id="example-collapse-text">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
            terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
            labore wes anderson cred nesciunt sapiente ea proident.
          </div>
        </Collapse>
      </div>
  );
}

export default Example;

推荐阅读