2016-08-19 19 views
1

私は反応ブートストラップを使用しようとしています。以下のコードを参照してください。個々のモジュール(Button、ButtonGroupなど)をロードすると正常に動作します。しかし、ReactBootstrap全体を(以下の2行目のように)インポートしたいのですが、それでは、要素を認識できません。どうすればいいのですか?リアブートストラップ - モジュールのインポート

import React from 'react'; 
 
import ReactBootstrap from 'react-bootstrap'; 
 
import { Button } from 'react-bootstrap'; 
 
import { ButtonGroup } from 'react-bootstrap'; 
 
import { DropdownButton } from 'react-bootstrap'; 
 
import { MenuItem } from 'react-bootstrap'; 
 

 
const NavBar = (props) => { 
 

 
    return (
 
     <div> 
 
      <Button bsStyle="success" bsSize="small"> 
 
       Something 
 
      </Button> 
 
      <ButtonGroup> 
 
       <DropdownButton bsStyle="success" title="Dropdown"> 
 
        <MenuItem key="1">Dropdown link</MenuItem> 
 
        <MenuItem key="2">Dropdown link</MenuItem> 
 
       </DropdownButton> 
 
       <Button bsStyle="info">Middle</Button> 
 
       <Button bsStyle="info">Right</Button> 
 
      </ButtonGroup> 
 
     </div> 
 
    ) 
 

 
} 
 

 
export default NavBar;

答えて

8

ありがとうござい反応し、ブートストラップをデフォルトのエクスポートを持っていないので、デフォルトのインポート構文(import ReactBootstrap from 'react-bootstrap')は、この場合に使用することはできません。あなたは次のことを行うことができます:

import * as ReactBootstrap from 'react-bootstrap'; 

<ReactBootstrap.Button bsStyle="success" bsSize="small"> 
    Something 
</ReactBootstrap.Button> 
+0

ありがとうございます。それを試してみるでしょう。 – Wasteland

+0

だから、 'import * 'を' react-bootstrap';から 'ReactBootstrap 'とする必要がありますか? srcの 'index.js'ファイルに入れようとしましたが、私のコンポーネントでは利用できませんでした。 – user2061886

関連する問題