Не работает Modal от react-bootstrap. В чем может быть причина?

Рейтинг: 0Ответов: 1Опубликовано: 16.03.2023

У меня есть React компонент, в котором я хочу использовать компонент Modal от react-bootstrap. Подключаю файлы и компоненты, как это написано в документации:

import React, { useRef, useEffect, useState } from 'react';
import './Board.scss';
import { useSelector, useDispatch } from 'react-redux';
import { pushToUndo, pushToRedo, setCanvas } from '../../store/canvasSlice';
import { setTool } from '../../store/toolSlice';
import Brush from '../../tools/Brush';

import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';

export const Board = () => {
  const canvasRef = useRef();
  const canvas = useSelector((state) => state.canvas.canvas);
  const tool = useSelector((state) => state.tool.tool);
  const dispatch = useDispatch();
  const connectionHandler = () => {};

  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  useEffect(() => {
    dispatch(setCanvas(canvasRef.current));
    dispatch(setTool(new Brush(canvasRef.current)));
  }, [dispatch]);

  const mouseDownHandler = () => {
    dispatch(pushToUndo(canvasRef.current.toDataURL()));
  };

  return (
    <>
      <Modal show={show} onHide={handleClose} backdrop='static' keyboard={false}>
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>I will not close if you click outside me. Don't even try to press escape key.</Modal.Body>
        <Modal.Footer>
          <Button variant='secondary' onClick={handleClose}>
            Close
          </Button>
          <Button variant='primary'>Understood</Button>
        </Modal.Footer>
      </Modal>
      <canvas
        ref={canvasRef}
        className='board'
        width={document.documentElement.clientWidth}
        height={document.documentElement.clientHeight}
        onMouseDown={() => mouseDownHandler()}
      ></canvas>
    </>
  );
};

При попытке запуска приложения в браузер выводятся ошибки:

введите сюда описание изображения

В консоли следующее:

введите сюда описание изображения

Почему так, что я неправильно делаю?

Ответы

▲ 0

Не работало, потому что я не в той папке npm пакет установил.