Блог

Я пытаюсь применить таблицы начальной загрузки в своем Reactjs, но это не работает

вот мой код:

  <div>
  <h1>Games List</h1>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
        <Table striped bordered hover variant="dark">
        <thead>
          <tr>
            <th>Benzirsiz Adi</th>
            <th>Gurusen Isim</th>
            <th>Aciklama</th>
            <th>Olusturma Tarihi</th>
            <th>Bitis Tarihi</th>
            <th>Oyun Tarihi</th>
            <th>Oyun Durumu</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
          <tr>
            <td>AlGame</td>
            <td>Activity List Game</td>
            <td>Activity List Game</td>
            <td> 01.01.2021</td>
            <td>01.01.2021</td>
            <td>Bireyesel</td>
            <td>Acik</td>
            <button>Duzenle</button>
          </tr>
        </tbody>
      </Table>
      <button> Yeni Oyna Ekle </button>
    </table>

    </div>
</div>
 

однако я использовал bootstrap в navbar, и он работал нормально

вот мой код package.json:

     {
  "name": "imonia",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/bootstrap": "^5.0.15",
    "@types/jquery": "^3.5.5",
    "@types/popper.js": "^1.11.0",
    "@types/react-bootstrap": "^0.32.25",
    "@types/react-icons": "^3.0.0",
    "@types/react-router-dom": "^5.1.7",
    "bootstrap": "4.6.0",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.0",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "web-vitals": "^1.0.1"
  },
 

кроме того, я удалил nodemodules и переустановил его, а также версию начальной загрузки, которую я удалил и
переустановил

но оба способа не работают

С вашим кодом и пакетом.json проблем нет. Единственная проблема, которую, я полагаю, вы забыли, — это импортировать файл bootstap.min.css в свой index.js файл. как:

импорт ‘bootstrap/dist/css/bootstrap.min.css’;

Просто скопируйте это и вставьте в свой index.js файл сверху. Кроме того, не забудьте импортировать таблицу на свою страницу, где есть весь код для таблицы. Он импортируется как:

импорт { таблицы } из «react-начальной загрузки»;

Вывод вашего кода выглядит следующим образом: