React Bootstrap отказывается от рендеринга

Я использую React-Bootstrap для рендеринга группы кнопок в качестве примера, но он отказывается рендерить и вместо этого говорит мне: «ButtonGroup не определен». Я установил модуль через NPM и импортировал его с помощью ES6 (переведено babel). Я экспортирую свои компоненты, чтобы в конечном итоге они отображались в моем приложении как дочерние элементы.

import React, { Component, PropTypes } from 'react';
import Bootstrap from 'react-bootstrap';

export default class NavBar extends Component {
    render(){

    return(
     <Bootstrap.ButtonGroup>
    <Bootstrap.Button>1</Bootstrap.Button>
    <Bootstrap.Button>2</Bootstrap.Button>
    <Bootstrap.DropdownButton title="Dropdown" id="bg-nested-dropdown">
      <Bootstrap.MenuItem eventKey="1">Dropdown link</Bootstrap.MenuItem>
      <Bootstrap.MenuItem eventKey="2">Dropdown link</Bootstrap.MenuItem>
    </Bootstrap.DropdownButton>
  </Bootstrap.ButtonGroup>
    );
  }
}

reactjs twitter-bootstrap react-bootstrap
person Justin E. Samuels    schedule 08.03.2017    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Существует специальный способ импорта с использованием ES6, основанный на документах для «реакции-загрузки»:

https://react-bootstrap.github.io/getting-started.html#es6

Модули Es6 пока не поддерживаются изначально, но теперь вы можете использовать синтаксис с помощью транспилятора, такого как Babel.

import Button from 'react-bootstrap/lib/Button';
// or
import { Button } from 'react-bootstrap';
person cwbutler    schedule 08.03.2017

arrow_upward
0
arrow_downward

вы также захотите добавить ButtonGroup из библиотеки react-bootstrap, как это.

import Button from 'react-bootstrap/lib/Button';
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
// or
import { Button, ButtonGroup } from 'react-bootstrap';
person Zachary Blumstein    schedule 17.10.2019