Блог

Главная - Вопросы по программированию - Аккордеон.Ошибка переключения: React.jsx: недопустимый тип

Аккордеон.Ошибка переключения: React.jsx: недопустимый тип

#reactjs #react-bootstrap

Вопрос:

Всем добрый день. Я использую React Bootstrap для оформления модального окна, и при использовании аккордеона я получаю ошибку.Переключить: React.jsx: тип недопустим-ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получено: не определено. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы, возможно, перепутали импорт по умолчанию и именованный импорт. Пожалуйста, найдите код для модального компонента в приложении, а также список моих зависимостей в файле package.json. Заранее спасибо за вашу помощь.

{ «имя»: «интерфейс», «версия»: «0.1.0», «личное»: верно, «зависимости»: { «@эмоция/реакция»: «^11.4.1», «@эмоция/стиль»: «^11.3.0», «@mui/материал»: «^5.0.2», «@библиотека тестирования/jest-dom»: «^5.14.1», «@библиотека тестирования/реакция»: «^11.2.7», «@библиотека тестирования/пользовательское событие»: «^12.8.3», «начальная загрузка»: «^5.1.0», «реагировать»: «^17.0.2», «реагировать-начальная загрузка»: «^2.0.0-rc.0», «реагировать-dom»: «^17.0.2», «реагировать-pdf»: «^5.4.0», «реагировать-плеер»: «^2.9.0», «реагировать-маршрутизатор-dom»: «^5.3.0», «реагировать-скрипты»: «4.0.3», «веб-жизненно важные функции»: «^1.1.2» },

 import React, { useState } from "react";
import { Button, Modal, ListGroup, Accordion } from "react-bootstrap";
import CloseModal from "../Assets/Main/CloseModal.png";
import { timersToString } from "../constants/timersToString";

const MarkerModal = ({
  markerModalVisible,
  setMarkerModalVisible,
  sessionDetails,
  sessionID,
  seekToNewMarker,
}) => {
  const [active, setActive] = useState("");

  const ID = sessionID;
  const sessionIDDetails = sessionDetails.filter(
    ({ sessionID }) => sessionID === ID
  );
  const markerDetails = sessionIDDetails[0]?.Markers;

  const toggleActive = (activeKey) => {
    active === activeKey ? setActive("") : setActive(activeKey);
  };

  console.log(markerDetails);
  return (
    <>
      {sessionID amp;amp; (
        <Modal
          show={markerModalVisible}
          onHide={() => setMarkerModalVisible(false)}
          backdrop="static"
          keyboard={false}
          centered
          size="lg"
          scrollable={true}
        >
          <Modal.Header
            style={{
              backgroundColor: "rgb(10, 10, 10)",
              border: "2px solid #494949",
              borderBottom: `1px solid #f2bb05`,
            }}
          >
            <Modal.Title style={{ color: "#a7a7a7" }}>
              {`Alert Timestamps`}
            </Modal.Title>
            <img
              src={CloseModal}
              alt="CloseModal"
              onClick={() => {
                setMarkerModalVisible(false);
                setActive("");
              }}
              style={{ width: "4%", opacity: "0.75" }}
            />
          </Modal.Header>
          <Modal.Body
            style={{
              backgroundColor: "rgb(10, 10, 10)",
              border: "2px solid #494949",
              borderTop: "none",
              paddingBottom: "25px",
            }}
          >
            <Accordion activeKey={active}>
              {!markerDetails.length amp;amp; (
                <div style={{ color: "#a7a7a7" }}>
                  {`No alert details to view`}
                </div>
              )}
              {markerDetails.map((marker, idx) => (
                <ListGroup key={marker.mID} variant="flush">
                  <Accordion.Toggle
                    action
                    as={ListGroup.Item}
                    eventKey={marker.mID}
                    onClick={() => toggleActive(marker.mID)}
                    style={{
                      backgroundColor: "rgb(10, 10, 10)",
                      color: "#a7a7a7",
                      borderBottom: "1px solid #494949",
                      display: "grid",
                      gridTemplateColumns: "10% 20% 70%",
                    }}
                  >
                    <div>{idx   1}.</div>
                    <div>{timersToString(marker.timestampSec)}</div>
                    <div
                      style={{
                        whiteSpace: "nowrap",
                        textOverflow: "ellipsis",
                        overflow: "hidden",
                      }}
                    >
                      {marker.msg}
                    </div>
                  </Accordion.Toggle>
                  <Accordion.Collapse eventKey={marker.mID}>
                    <ListGroup.Item
                      style={{
                        textAlign: "justify",
                        textJustify: "inter-word",
                        backgroundColor: "rgb(10, 10, 10)",
                        color: "#a7a7a7",
                        border: "1px solid #494949",
                        borderTop: "none",
                      }}
                    >
                      <b>Message</b> <br />
                      {marker.msg} <br />
                      <div style={{ paddingTop: "7px", textAlign: "right" }}>
                        <Button
                          variant="secondary"
                          onClick={() => {
                            setActive("");
                            //   seekToNewMarker(marker.timestampSec);
                          }}
                          size="sm"
                        >
                          View alert
                        </Button>
                      </div>
                    </ListGroup.Item>
                  </Accordion.Collapse>
                </ListGroup>
              ))}
            </Accordion>
          </Modal.Body>
        </Modal>
      )}
      {!sessionID amp;amp; <p>Session ID hasn't been provided</p>}
    </>
  );
};

export default MarkerModal;
Метки: