Question

我试图将一个反应引导程序的小例子放在一起来看它的实际效果，但是我没有让任何组件正确呈现。例如，

这是一个微不足道的组成部分：

import React from 'react';
import {ButtonToolbar, DropdownButton, MenuItem} from 'react-bootstrap';

export default React.createClass({
  render: function() {
    return <div>

      <ButtonToolbar>
        <DropdownButton bsSize="large" title="Large button" id="dropdown-size-large">
          <MenuItem eventKey="1">Action</MenuItem>
          <MenuItem eventKey="2">Another action</MenuItem>
          <MenuItem eventKey="3">Something else here</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey="4">Separated link</MenuItem>
        </DropdownButton>
      </ButtonToolbar>
    </div>
  }
});

这里是我在脚本中加载的index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"></link>
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700"></link>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.1/react-bootstrap.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

我已经确认ButtonToolbar，DropdownButton和MenuItem正在导入，并且脚本加载正常，但该组件只是普通的html，而不是bootstrap样式。我错过了什么？

Answer 1

您需要明确add the bootstrap CSS到您的项目。反应引导程序组件不包含CSS样式。

检查Bootstrap有关如何将其包含在项目中的选项。

一种选择是安装bootstrap包

npm install --save bootstrap

并链接到HTML文件中的样式表：

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">

react-bootstrap无法正确导入

1 个答案: