用 react-bootstrap-4 反应

Question

我正在尝试使用 bootstrap 4.

编写我的第一个组件

import React,{Component} from 'react';
import {Button} from 'react-bootstrap-4';

class TextField extends Component {
constructor(props){
  super(props);
}

render() {
  return (
    <Button bsStyle="primary" bsSize="large">Default</Button>
    );
  }
}

export default TextField;

在我的index.js中我这样称呼它：

import React, {Component} from 'react';
import ReactDOM from "react-dom";

import TextField from './components/custom/text_field';

class App extends Component{
  constructor(props){
    super(props);
  }

  render(){
    return (
      <div>
       Helo World1
       <br/>
       <TextField id="test" />
      </div>
  );
  }
  }

  ReactDOM.render(<App />, document.querySelector('.container'));

当我运行应用程序时，我没有收到任何错误，但按钮看起来不像它应该的那样

我是不是漏掉了什么？

Answer 1

您负责将 Bootstrap 的 CSS 包含在 react-bootstrap 中，react-bootstrap-4 是.

根据其 Getting Started 指南：

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
For more advanced use cases you can also use a bundler like Webpack or Browserify to include the css files for you as part of your build process but that is beyond the scope of this guide.

您需要为 Bootstrap 4.

做同样的事情

Answer 2

如上通过 CDN 包含 Bootstrap 4 你只会得到 css 并且任何依赖 JS 的组件都不会工作。我在 Meteor.js.

上遇到过 React 的这个问题

我做的是 npm install:

"bootstrap": "^4.0.0-alpha.6",
"tether": "^1.4.0"  // Tether is required by bootstrap.js

通过主js文件导入css：

import 'bootstrap/dist/css/bootstrap.css'

我完全 Bootstrap 使用 JS 的唯一方法是将 bootstrap.js 的副本抓取到我的 libs 文件夹（任何前端文件夹）中，修改它以在顶部导入 Tether：

import tether from 'tether'

global.Tether = tether

出于某些原因，我找不到其他方法来解决 Tether 依赖性问题。

Meteor 自己进行缩小，所以我并没有真正为 .min.js 烦恼，但是，您不能将 tether 导入缩小的 bootstrap.js.

像许多其他人一样，我正在等待 bootstrap 4 的更多 "final" 版本，可能还有一个简单的 npm i bootstrap --save 程序。

用 react-bootstrap-4 反应

React with react-bootstrap-4

reactjs

react-bootstrap