Аккордеон React Bootstrap не работает с NextJS

ProgramBox

Аккордеон React Bootstrap не работает с NextJS

Post author:admin
Запись опубликована:8 января, 2022
Post category:Вопросы по программированию

#javascript #reactjs #next.js #react-bootstrap

Вопрос:

Я перенес свое заявление из CRA в CNA. Все работает как по волшебству, но аккордеон для начальной загрузки совсем не работает. Я перепробовал все возможные способы, но все еще не смог придумать, как это исправить.

сообщение об ошибке:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Я пробовал импортировать его несколькими способами, но ничего не работает.

import Accordion from 'react-bootstrap/Accordion';

import {Accordion} from 'react-bootstrap/Accordion';

import Accordion from 'react-bootstrap';

import {Accordion} from 'react-bootstrap';

Если я использую import Accordion from 'react-bootstrap';

сообщение об ошибке:

Иначе

Заранее спасибо 🙂

1. Ты когда-нибудь понимал, почему это не сработало?

2. Ничего не получалось, Поэтому я сделал свой собственный Аккордеон на заказ. Планирую создать пакет npm. 😀

3. на самом деле я думаю, что мы с вами столкнулись с одной и той же проблемой, и это было в документации react-bootstrap, в документации по умолчанию указана самая последняя версия, а не версия, установленная с помощью команды npm i react-bootstrap , установленная версия является предыдущей версией 4.6. ответ внизу этой страницы на самом деле правильный. причина, по которой вы столкнулись с этой ошибкой, заключается в том, что версия react-bootstrap вашего приложения не распознает Accordion.Item и другие компоненты.

Ответ №1:

Я не уверен, ты пробовал это?

 import Accordion from 'react-bootstrap';
import Item from 'react-bootstrap';

или

 import { Accordion , Item } from 'react-bootstrap';

Ответ №2:

импорт { Аккордеона, карты } из «react-bootstrap»;

 <Accordion>
    <Card>
      <Accordion.Toggle as={Card.Header} eventKey="0">
        TAB 1
      </Accordion.Toggle>

      <Accordion.Collapse eventKey="0">
        <Card.Body>This is first tab body</Card.Body>
      </Accordion.Collapse>
    </Card>

    <Card>
      <Accordion.Toggle as={Card.Header} eventKey="1">
        TAB 2
      </Accordion.Toggle>

      <Accordion.Collapse eventKey="1">
        <Card.Body>This is second tab body</Card.Body>
      </Accordion.Collapse>
    </Card>
  </Accordion>

Ответ №3:

Проблема, с которой вы, вероятно, сталкиваетесь, заключается в разнице версий между react-bootstrap установленным в вашем приложении и документацией, которую вы используете на их веб-странице. https://react-bootstrap.github.io По умолчанию на веб-странице указана версия v2.0.0-rc.0 (Bootstrap 5.1) их документации (вы можете увидеть это рядом с их значками github и discord, вверху справа…). Вам необходимо изменить документацию, чтобы v1.6.1 (Bootstrap 4) в ней была указана правильная документация по компонентам.

например v2.0.0-rc.0 , вы создаете аккордеон таким образом:

 <Accordion defaultActiveKey="0">
  <Accordion.Item eventKey="0">
    <Accordion.Header>Accordion Item #1</Accordion.Header>
    <Accordion.Body>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </Accordion.Body>
  </Accordion.Item>
</Accordion>

В то время как в предыдущем наборе документации это как:

 <Accordion defaultActiveKey="0">
  <Card>
    <Card.Header>
      <Accordion.Toggle as={Button} variant="link" eventKey="0">
        Click me!
      </Accordion.Toggle>
    </Card.Header>
    <Accordion.Collapse eventKey="0">
      <Card.Body>Hello! I'm the body</Card.Body>
    </Accordion.Collapse>
  </Card>
</Accordion>

Причина, по которой вы получаете ошибку, заключается Accordion.Item в том, что, возвращая строку, когда компонент Accordion.Item не существует, react думает, что вы экспортируете код пользовательского типа, и поскольку он не может найти этот код, он возвращает undefined , когда на самом деле он ожидает string

Короче говоря, измените документацию, и вы получите свой ответ, или, наоборот, вы можете обновить свою react-bootstrap версию bootstrap и сделать то же самое, просто убедитесь, что вы используете правильную документацию для создания своих компонентов.

Метки: Аккордеон React Bootstrap не работает с NextJS