React-Bootstrap -导入模块

Question

我正在尝试使用react-bootstrap。请参阅下面的代码。如果我加载单个模块(例如，按钮、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

Nick 提供的答案不是推荐的，因为它会使你的组件膨胀。

但是，在更好的语法中使用命名导入。

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

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