React-Bootstrap - 導入模塊

Question

我正在嘗試使用react-bootstrap。請參閱下面的代碼。如果我加載單個模塊（例如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;

謝謝

Answer 1

反應的自舉不具有默認的出口，所以默認導入語法（import ReactBootstrap from 'react-bootstrap'）不能在這種情況下使用。您可以執行以下操作：

import * as ReactBootstrap from 'react-bootstrap'; 

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