React Bootstrap 拒绝渲染答案

【问题标题】：React Bootstrap Refusing to RenderReact Bootstrap 拒绝渲染
【发布时间】：2017-03-08 16:41:55
【问题描述】：

我使用 React-Bootstrap 来渲染一个按钮组作为示例，但它拒绝渲染，而是告诉我“ButtonGroup 未定义”。我已经通过 NPM 安装了模块并使用 ES6（由 babel 翻译）导入了它。我正在导出我的组件，然后最终在我的应用程序中呈现为子项。

import React, { Component, PropTypes } from 'react';
import Bootstrap from 'react-bootstrap';

export default class NavBar extends Component {
    render(){

    return(
     <Bootstrap.ButtonGroup>
    <Bootstrap.Button>1</Bootstrap.Button>
    <Bootstrap.Button>2</Bootstrap.Button>
    <Bootstrap.DropdownButton title="Dropdown" id="bg-nested-dropdown">
      <Bootstrap.MenuItem eventKey="1">Dropdown link</Bootstrap.MenuItem>
      <Bootstrap.MenuItem eventKey="2">Dropdown link</Bootstrap.MenuItem>
    </Bootstrap.DropdownButton>
  </Bootstrap.ButtonGroup>
    );
  }
}

【问题讨论】：

标签： twitter-bootstrap reactjs react-bootstrap

【解决方案1】：

根据“react-bootstrap”的文档，有一种使用 ES6 导入的特殊方法：

https://react-bootstrap.github.io/getting-started.html#es6

原生还不支持 Es6 模块，但您可以使用语法现在在像 Babel 这样的编译器的帮助下。

import Button from 'react-bootstrap/lib/Button';
// or
import { Button } from 'react-bootstrap';

【讨论】：

【解决方案2】：

您还需要像这样从 react-bootstrap 库中引入 ButtonGroup。

import Button from 'react-bootstrap/lib/Button';
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
// or
import { Button, ButtonGroup } from 'react-bootstrap';

【讨论】：