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

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

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

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

通过这种方式，您知道要导入的内容并将组件尺寸保持为最小

React-Bootstrap - 导入模块

2 个答案: