react-bootstrap无法正确导入

Question

我试图将react-bootstrap的一个简单示例放在一起，以查看实际运行情况，但是我没有得到任何可以正确渲染的组件。 例如，

这是一个琐碎的组成部分：

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格式，而不是自举程序风格。 我想念什么？

Answer 1

您需要将引导CSS明确添加到项目中。 CSS样式不包含在react bootstrap组件中。

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

一种选择是安装bootstrap包

npm install --save bootstrap

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

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

react-bootstrap无法正确导入

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-01-02 23:50:04

react-bootstrap无法正确导入

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-01-02 23:50:04

解决方案1
2 已采纳 2016-01-02 23:50:04