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

react-bootstrap没有默认导出,因此import ReactBootstrap from 'react-bootstrap'在这种情况下不能使用默认的导入语法().您可以执行以下操作:

import * as ReactBootstrap from 'react-bootstrap';

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

Answer 2

不建议尼克提供的答案，因为它会使您的组件component肿。

而是以更好的语法使用命名的导入。

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

这样，您就知道要导入的内容并将组件尺寸保持在最小