Question

我正在尝试按照此网站的说明实施反应简单下拉列表：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'导入Menu组件并将组件添加到App.js时，我收到以下错误：

“元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object。检查Menu的渲染方法。

你能帮忙吗？

谢谢，埃米尔·科巴斯利奇

Answer 1

似乎require语句没有从react-simple-dropdown导入默认导出，因为混合了ES6 import和require，所以你必须导入Dropdown，DropdownTrigger＆amp; 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 Simple Dropdown不起作用

1 个答案: