反应-引导-4

Question

我正在尝试使用引导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版本，所以我们不附带任何包含的css。但是，使用这些组件需要一些样式表。如何以及包含哪些引导样式取决于您，但最简单的方法是包含来自CDN的最新样式。对于更高级的用例，您也可以使用像Webpack或Browserify这样的绑定器为您提供css文件，作为构建过程的一部分，但这超出了本指南的范围。

您需要为Bootstrap 4做等效的操作。

Answer 2

通过上面的CDN包含引导程序4，你只能得到css，任何依赖于JS的组件都不能工作。我一直在面对这个问题，在Meteor.js上做出反应。

我所做的就是安装npm：

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

通过主js文件导入css：

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

使用JS获得完全引导的唯一方法是将bootstrap.js的副本获取到我的libs文件夹(任何前端文件夹)，修改它以导入顶部的绑定：

import tether from 'tether'

global.Tether = tether

由于某些原因，我找不到解决系绳依赖的另一种方法。

流星做它自己的缩小，所以我没有真正的烦恼的.min.js，然而，你不能导入一个小型化的bootstrap.js。

和其他许多人一样，我正在等待引导4的更“最终”版本，可能还有一个简单的npm i bootstrap --save过程。