React Simple Dropdown не работает

Я пытаюсь реализовать простой раскрывающийся список реагирования, следуя инструкциям с этого веб-сайта: https://www.npmjs.com/package/react-simple-dropdown

Это код для раскрывающегося компонента:

import React from 'react';
import './Dropdown.css';
var Dropdown = require('react-simple-dropdown');
var DropdownTrigger = Dropdown.DropdownTrigger;
var DropdownContent = Dropdown.DropdownContent;

class Menu extends React.Component {
  render() {
    return(
      <Dropdown>
          <DropdownTrigger>Profile</DropdownTrigger>
          <DropdownContent>
              <img src = "avatar.jpg" /> Username
              <ul>
                  <li>
                      <a href = "/profile">Profile</a>
                  </li>
                  <li>
                      <a href = "/favorites">Favorites</a>
                  </li>
                  <li>
                      <a href = "/logout">Log Out</a>
                  </li>
              </ul>
          </DropdownContent>
      </Dropdown>
    );
  }
}

export default Menu;

Когда я импортирую компонент меню с помощью import Menu from '../Dropdown/Menu' и добавляю компонент в App.js, я получаю следующую ошибку:

"Тип элемента недопустим: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: объект. Проверьте метод рендеринга Menu. "

Не могли бы вы помочь с этим?

Спасибо, Эмир Кобаслич

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
996
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Похоже, что инструкция require не импортирует экспорт по умолчанию из раскрывающегося списка response-simple-dropdown из-за смешивания импорта ES6 и require, поэтому вам нужно импортировать Dropdown, DropdownTrigger и DropdownContent, как показано ниже:

import Dropdown, { DropdownTrigger, DropdownContent} from 'react-simple-dropdown';

так что ваш код будет:

import React from 'react';
import Dropdown, { DropdownTrigger, DropdownContent} from 'react-simple-dropdown';

class Menu extends React.Component {
render() {
    return (
        <Dropdown>
            <DropdownTrigger>Profile</DropdownTrigger>
            <DropdownContent>
                <img src = "avatar.jpg" /> Username
          <ul>
                    <li>
                        <a href = "/profile">Profile</a>
                    </li>
                    <li>
                        <a href = "/favorites">Favorites</a>
                    </li>
                    <li>
                        <a href = "/logout">Log Out</a>
                    </li>
                </ul>
            </DropdownContent>
        </Dropdown>
    );
}
}

export default Menu;

Другие вопросы по теме