如何在TypeScript React项目中添加Bootstrap表格并适配现有HTML代码

第一步：修复样式不生效的核心问题 #

• 语法替换：React/TSX中不识别class属性，所有HTML中的class="xxx"必须替换为className="xxx"，这是最常见的适配错误
• 正确引入Bootstrap样式：
  1. 执行npm命令安装Bootstrap依赖：npm install bootstrap
  2. 在项目入口文件（通常是index.tsx或App.tsx）顶部导入样式文件：import 'bootstrap/dist/css/bootstrap.min.css'
• 如果使用react-bootstrap组件库，额外安装对应依赖和类型声明：
  执行命令：npm install react-bootstrap @types/react-bootstrap

第二步：修复react-bootstrap Table无边框问题 #

react-bootstrap的Table组件默认不带边框，需要显式声明属性开启：

// 加bordered属性即可显示边框，striped是斑马纹、hover是行悬浮效果，可按需添加
<Table striped bordered hover>
  {/* 表格内容 */}
</Table>

第三步：现有HTML代码改造适配TSX的核心要点 #

• 所有自闭和标签必须加闭合标识，比如<img>改为<img />、<input>改为<input />
• 事件属性改为驼峰命名，比如onclick改为onClick、onchange改为onChange
• 模态框交互从DOM操作改为React state管理：
  不需要手动操作DOM切换模态框显示隐藏，用state变量绑定控制即可，示例：

  import { useState } from 'react'
  import { Modal, Button } from 'react-bootstrap'
  
  const MyComponent = () => {
    // 控制新增模态框显示隐藏的state
    const [showAddModal, setShowAddModal] = useState(false)
    return (
      <>
        <Button onClick={() => setShowAddModal(true)}>新增数据</Button>
        <Modal show={showAddModal} onHide={() => setShowAddModal(false)}>
          <Modal.Header closeButton>
            <Modal.Title>新增数据</Modal.Title>
          </Modal.Header>
          <Modal.Body>表单内容</Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={() => setShowAddModal(false)}>关闭</Button>
            <Button variant="primary">保存</Button>
          </Modal.Footer>
        </Modal>
      </>
    )
  }
  

• 表格数据渲染改为动态遍历：
  先给你的数据定义TS类型，然后遍历axios请求拿到的数组生成表格行即可，示例：

  // 定义你的表格数据类型，按需补充字段
  interface TableItem {
    id: number;
    name: string;
    [key: string]: any;
  }
  
  const MyComponent = () => {
    const [tableData, setTableData] = useState<TableItem[]>([])
    // axios请求成功后调用setTableData(返回的数组)赋值即可
  
    return (
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {tableData.map(item => (
            // 遍历的行必须加唯一key属性
            <tr key={item.id}>
              <td>{item.id}</td>
              <td>{item.name}</td>
              <td>
                <Button variant="warning" size="sm" className="me-2">编辑</Button>
                <Button variant="danger" size="sm">删除</Button>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    )
  }
  

补充说明 #

如果你不想使用react-bootstrap组件，只想复用原来的纯HTML Bootstrap代码，只要完成class改className、正确引入Bootstrap样式两个操作，原有HTML代码直接放到TSX的return块中即可正常生效，无需额外改造。

内容的提问来源于stack exchange，提问作者dontknowcoding