Question

我正在使用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>
    );
  }
}

Answer 1

有一种特殊的方法可以根据＆＃39; react-bootstrap＆＃39;的文档使用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';

Answer 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';

React Bootstrap拒绝呈现

2 个答案: