元素类型无效：应为字符串（用于内置组件）...添加 react-bulma-components 后答案

【问题标题】：Element type is invalid: expected a string (for built-in components)... after adding react-bulma-components元素类型无效：应为字符串（用于内置组件）...添加 react-bulma-components 后
【发布时间】：2022-07-19 00:54:57
【问题描述】：

我正在尝试从bulma CSS 框架添加一个navbar。实际上，我正在使用react-bulma-components来实现这一点。

到目前为止，我有以下HeaderReactcomponent：

import React from 'react';

import {
    Navbar, NavbarBrand,
    NavbarItem, NavbarMenu, NavbarContainer,
    NavbarBurger, NavbarLink, NavbarDropdown,
    NavbarDivider
} from 'react-bulma-components';



const Header = () => {


    const MyNavbar = <Navbar>
        <NavbarBrand>
            <NavbarItem href="#">
                <img
                    alt="Bulma: a modern CSS framework based on Flexbox"
                    height="28"
                    src="https://bulma.io/images/bulma-logo.png"
                    width="112"
                />
            </NavbarItem>
            <NavbarBurger />
        </NavbarBrand>
        <NavbarMenu>
            <NavbarContainer>
                <NavbarItem href="#">
                    <NavbarLink>
                        First
                    </NavbarLink>
                    <NavbarDropdown>
                        <NavbarItem href="#">
                            Subitem 1
                        </NavbarItem>
                        <NavbarItem href="#">
                            Subitem 2
                        </NavbarItem>
                        <NavbarDivider />
                        <NavbarItem href="#">
                            After divider
                        </NavbarItem>
                    </NavbarDropdown>
                </NavbarItem>
                <NavbarItem href="#">
                    Second
                </NavbarItem>
            </NavbarContainer>
            <NavbarContainer align="end">
                <NavbarItem href="#">
                    At the end
                </NavbarItem>
            </NavbarContainer>
        </NavbarMenu>
    </Navbar>

    return (
        <>

            <div className="hero is-danger is bold">
                <div className="hero-body">
                    <div className="container">
                        <h2 className="title is-2"> TEST </h2>
                        <h5 className="title is-5"> test</h5>
                    </div>

                    { MyNavbar }

                </div>
            </div>

        </>
    );
}

export default Header;

如果我取消注释 { MyNavbar } 它会失败并显示以下错误消息：

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.

Check the render method of `Header`.

由于我已经有将近 2 年没有使用 React 了，所以错误可能很明显，但到目前为止我还没有得到它......

【问题讨论】：

标签： reactjs bulma

【解决方案1】：

我怀疑你可能在打this issue (react-bulma-compoenents GitHub)。

DropdownItem 实际上它的 Dropdown.Item 与分隔符相同。

NavbarDropdown 实际上应该是 Navbar.DropDown。

我刚刚遇到了ButtonGroup 与Button.Group 的类似问题。不知道为什么它没有反映在文档中。

错误信息也令人困惑。它的意思是，“你让我导入某个对象，但我找不到它”。

【讨论】：