twitter-bootstrap React-Bootstrap - 导入模块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39047130/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React-Bootstrap - importing modules
提问by Wasteland
I'm trying to use react-bootstrap. See the code below. If I load individual modules (eg. Button, ButtonGroup, etc.), it works fine. I'd rather, however, import the whole ReactBootstrap (like in line 2 below) but then, it does not recognise elements like . How do I do it?
我正在尝试使用 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;Thank you
谢谢
回答by Nick Uraltsev
react-bootstrap doesn't have a default export, so the default import syntax (import ReactBootstrap from 'react-bootstrap') cannot be used in this case. You can do the following though:
react-bootstrap 没有默认导出，因此import ReactBootstrap from 'react-bootstrap'在这种情况下不能使用默认导入语法 ( )。您可以执行以下操作：
import * as ReactBootstrap from 'react-bootstrap';
<ReactBootstrap.Button bsStyle="success" bsSize="small">
Something
</ReactBootstrap.Button>
回答by Rust
The answer provided by Nick is notrecommended as it will bloat your component.
不推荐Nick 提供的答案，因为它会使您的组件膨胀。
Rather use the named imports however in a better syntax.
而是以更好的语法使用命名导入。
import { Button, ButtonGroup, DropdownButton, MenuItem } from 'react-bootstrap';
This way you know what you are importing and keep the component size to a minimum
这样您就知道要导入的内容并将组件大小保持在最小
