React Bootstrap拒絕渲染

Question

我使用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> 
    ); 
    } 
} 

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';