React Bootstrapをレンダリングしない

Question

ボタングループを例としてレンダリングするのにReact-Bootstrapを使用していますが、レンダリングが拒否され、代わりに "ButtonGroup is undefined"と表示されます。私は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> 
    ); 
    } 
} 

Answer 1

「反応し、ブートストラップ」のドキュメントに基づいて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';