twitter-bootstrap - 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 { Button,  ButtonGroup, DropdownButton, MenuItem } from 'react-bootstrap';

这样您就知道要导入什么并将组件大小保持在最小