0

У меня есть 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>
    </>
  );
};

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

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

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

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

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

1 ответ 1

0

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

3
  • 1
    Не является ответом на вопрос. Чтобы оставить свои замечания или попросить у автора внести уточнения, оставьте комментарий к соответствующему сообщению. — из очереди проверок
    – SwaD
    16 мар в 20:07
  • @SwaD а что ещё по вашему мнению нужно добавить в ответ?
    – ΝNL993
    16 мар в 20:18
  • @ΝNL993 это не ответ, а комментарий к вопросу или дополнение в виде P.S.
    – DaemonHK
    17 мар в 3:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.