React Sidenav - Bootstrap 4 & Material 设计不工作

Question

我尝试通过 mdbreact 的导航实现边栏以使用 bootstrap 和 material 设计。

我刚刚从示例中复制粘贴了代码：https://mdbootstrap.com/docs/react/navigation/sidenav/

import React from 'react';
import { MDBIcon, MDBSideNavCat, MDBSideNavNav, MDBSideNav, 
         MDBSideNavLink, MDBContainer, MDBRow, MDBBtn } from 'mdbreact';

class SideNav extends React.Component {
  constructor(props) {
  super(props);
  this.state = {isOpen: false};

  this.handleToggle = this.handleToggle.bind(this);
 }

 state = {
    isOpen: false
 };

 handleToggle() {
    this.setState({ isOpen: !this.state.isOpen });
 }

 render() {

 return (
  <MDBContainer>
    <MDBRow>
      <MDBBtn onClick={this.handleToggle}><MDBIcon icon="bars" size="5x" /></MDBBtn>
    </MDBRow>
    <MDBSideNav
      logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
      hidden
      triggerOpening={this.state.isOpen}
      breakWidth={1300}
      className="deep-purple darken-4"
    >
      <li>
        <ul className="social">
          <li>
            <a href="#!">
              <MDBIcon icon="facebook" />
            </a>
          </li>
          <li>
            <a href="#!">
              <MDBIcon icon="pinterest" />
            </a>
          </li>
          <li>
            <a href="#!">
              <MDBIcon icon="google-plus" />
            </a>
          </li>
          <li>
            <a href="#!">
              <MDBIcon icon="twitter" />
            </a>
          </li>
        </ul>
      </li>
      <MDBSideNavNav>
        <MDBSideNavCat
          name="Submit blog"
          id="submit-blog"
          icon="chevron-right"
        >
          <MDBSideNavLink>Submit listing</MDBSideNavLink>
          <MDBSideNavLink>Registration form</MDBSideNavLink>
        </MDBSideNavCat>
        <MDBSideNavCat
          name="Instruction"
          id="instruction"
          icon="hand-pointer-o"
          href="#"
        >
          <MDBSideNavLink>For bloggers</MDBSideNavLink>
          <MDBSideNavLink>For authors</MDBSideNavLink>
        </MDBSideNavCat>
        <MDBSideNavCat name="About" id="about" icon="eye">
          <MDBSideNavLink>Instruction</MDBSideNavLink>
          <MDBSideNavLink>Monthly meetings</MDBSideNavLink>
        </MDBSideNavCat>
        <MDBSideNavCat name="Contact me" id="contact-me" icon="envelope-o">
          <MDBSideNavLink>FAQ</MDBSideNavLink>
          <MDBSideNavLink>Write a message</MDBSideNavLink>
        </MDBSideNavCat>
      </MDBSideNavNav>
    </MDBSideNav>
  </MDBContainer>
);
}
}

export default SideNav;

我收到一个很长的错误：

元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：未定义。您可能忘记从定义它的文件中导出您的组件，或者您可能混淆了默认导入和命名导入。

我觉得有点问题，但我不确定，有人有问题吗？提前致谢。

Answer 1

我刚刚找到问题的答案。您必须购买专业版才能使用 SideNav。我忽略了红色标签。

React Sidenav - Bootstrap 4 & Material 设计不工作

React Sidenav - Bootstrap 4 & Material Design not working

reactjs

material-design

react-bootstrap

mdbreact