React- Bootstrap не работает над компонентами - PullRequest
Новая
       29

React- Bootstrap не работает над компонентами

0 голосов
/ 09 июля 2020

Я только что начал новое приложение для реагирования и хотел реализовать response- bootstrap (сделал это, запустив npm install response- bootstrap bootstrap). Теги Column, Row и Button не работают, а В папке node-modules существует папка response- bootstrap. 

import React from 'react';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import {Button, Col} from 'react-bootstrap';

class App extends React.Component {

  constructor(props) {
    super(props)
  }

  render() {
    return(
      <Container fluid>
        <Row>
          <Col>
          hi
          </Col>
          <Col>
          bye
          </Col>
        </Row>
        <Button variant='primary'>hi</Button>
      </Container>
    )
  }
}
export default App;

1 Ответ

1 голос
/ 09 июля 2020

Вам необходимо импортировать bootstrap.

Добавьте следующее для импорта bootstrap. В зависимости от структуры вашей папки относительный путь может быть другим. 

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Тогда bootstrap будет доступно вашему компоненту приложения и всем его дочерним компонентам. 

import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import { Button, Col } from "react-bootstrap";

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

class App extends React.Component {
  render() {
    return (
      <Container fluid>
        <Row>
          <Col>hi</Col>
          <Col>bye</Col>
        </Row>
        <Button variant="primary">hi</Button>
      </Container>
    );
  }
}

export default App;

Другой вариант - для импорта bootstrap в ваш index. js, и он будет доступен для всех ваших компонентов. 

import React from "react";
import ReactDOM from "react-dom";

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);
...