Я пытаюсь реализовать простой раскрывающийся список реагирования, следуя инструкциям с этого веб-сайта: 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. "
Не могли бы вы помочь с этим?
Спасибо, Эмир Кобаслич





Похоже, что инструкция 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;