Question

我尝试通过从mdbreact导航来实现补充工具栏，以使用引导程序和材料设计。

我刚刚从以下示例中复制了示例中的代码：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;

我遇到了一个很长的错误：

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

我认为这有问题，但我不确定，有人遇到问题吗？预先感谢。

Answer 1

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

React Sidenav-Bootstrap 4和材质设计不起作用

1 个答案: