Reactjs 简单下拉菜单不起作用

我正试图按照本网站的说明实现一个简单的下拉列表：

这是下拉组件的代码：

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;

从“React”导入React；
导入“./Dropdown.css”；
var Dropdown=require（'react-simple-Dropdown'）；
var dropdownttrigger=Dropdown.dropdownttrigger；
var DropdownContent=Dropdown.DropdownContent；
类菜单扩展了React.Component{
render（）{
返回(
轮廓
用户名








);
}
}
导出默认菜单；

当我使用“../Dropdown/Menu”导入菜单组件并将组件添加到App.js时，我得到以下错误：

“元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。 检查

菜单的渲染方法

“

你能帮个忙吗

谢谢，

---

Emir Kobaslic

似乎require语句没有从react simple下拉菜单导入默认导出，因为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;

从“React”导入React；
从“react simple Dropdown”导入下拉列表，{DropdownTrigger，DropdownContent}；
类菜单扩展了React.Component{
render（）{
返回(
轮廓
用户名








);
}
}
导出默认菜单；