Javascript 反应引导未正确导入_Javascript_Twitter Bootstrap_Reactjs_React Bootstrap

Javascript 反应引导未正确导入

javascript twitter-bootstrap reactjs

Javascript 反应引导未正确导入,javascript,twitter-bootstrap,reactjs,react-bootstrap,Javascript,Twitter Bootstrap,Reactjs,React Bootstrap,我正试图组合一个简单的react引导示例来查看它的实际效果，但我没有让任何组件正确渲染。比如说, 以下是一个简单的组件： import React from 'react'; import {ButtonToolbar, DropdownButton, MenuItem} from 'react-bootstrap'; export default React.createClass({ render: function() { return <div>

我正试图组合一个简单的react引导示例来查看它的实际效果，但我没有让任何组件正确渲染。比如说,

以下是一个简单的组件：

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>
  }
});

从“React”导入React；
从“react bootstrap”导入{ButtonToolbar、DropdownButton、MenuItem}；
导出默认的React.createClass({
render:function（）{
返回
行动
另一个动作
还有别的吗
分离环
}
});

这是我在脚本中加载的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，而不是引导样式。我遗漏了什么？

您需要明确说明您的项目。react引导组件不包括CSS样式

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

一个选项是安装

bootstrap

软件包

npm install --save bootstrap

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

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

您还可以使用css加载器、样式加载器和less加载器和less加载器。然后在组件文件中按以下方式引用。需要（“！style！css！less！bootstrap/less/bootstrap.less”）；