React Sidenav - Bootstrap 4 & Material Design не работает - PullRequest
Новая
       12

React Sidenav - Bootstrap 4 & Material Design не работает

0 голосов
/ 21 декабря 2018

Я попытался реализовать боковую панель с навигацией из 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;

Я получаю длинную ошибку:

Тип элементаНедопустимый: ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: undefined.Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы, возможно, перепутали импорт по умолчанию и имена.

Я думаю, что это что-то в этом, но я не уверен, у кого-нибудь есть проблемы?Заранее спасибо.

1 Ответ

0 голосов
/ 21 декабря 2018

Я только что нашел ответ на вопрос.Вы должны купить профессиональную версию, чтобы использовать SideNav.Я пропускаю красную метку.

...