React-bootstrap 代码未呈现

Question

我已经用 npm 安装了 react-bootstrap (npm install react-bootstrap --save) 但我的代码没有在浏览器上呈现。该页面只是空白。我使用 webpack 进行构建，使用 babel 进行编译。下面是我的反应代码。

import React from 'react'
import ReactDOM from 'react-dom'
import ReactBootstrap from 'react-bootstrap'

const buttonsInstance = (
  <ButtonToolbar>
    <Button bsStyle="primary" bsSize="large" active>Primary button</Button>
    <Button bsSize="large" active>Button</Button>
  </ButtonToolbar>
);

ReactDOM.render(buttonsInstance, document.getElementById('root'));

谢谢！

Answer 1

导入您将明确使用的控件：

import React from 'react'
import ReactDOM from 'react-dom'
import {ButtonToolbar, Button} from 'react-bootstrap' // define individual controls to import    
const buttonsInstance = (
  <ButtonToolbar>
    <Button bsStyle="primary" bsSize="large" active>Primary button</Button>
    <Button bsSize="large" active>Button</Button>
  </ButtonToolbar>
);

ReactDOM.render(buttonsInstance, document.getElementById('root'));

React-bootstrap 代码未呈现

React-bootstrap code not rendering

react-bootstrap