在React中不能使用Bootstrap吗?

时间:2018-03-06 04:02:26

标签: javascript twitter-bootstrap reactjs

我试图在reactJS文件中使用按钮。这是我的代码

...
onContentReady:function() {

    var body = this.$content.find('.confirm_body');

    var h3 = document.createElement('h3');
    h3.appendChild(document.createTextNode("child"));
    body.append($(h3)); //make jQuery object for h3 element node & use append
}
...

但是反应正在给我:

export class Add extends React.Component {
  render() {
    return (
      <div>
        <Button bsStyle="primary" bsSize="large">
          Add
        </Button>
      </div>
    );
  }
}

我在package.json中的依赖项中包含了bootstrap,以及popper.js和jquery,我尝试过npm install bootstrap。我也确保

'Button' is not defined  react/jsx-no-undef

在我的mainJs文件中。

我也尝试过没有运气。

2 个答案:

答案 0 :(得分:1)

是的,你可以。但我建议你检查这个库。 ReactStrap

答案 1 :(得分:0)

AMR,

看起来你正在尝试使用组件,所以我相信你正在尝试使用React-Bootstrap。这就是:https://react-bootstrap.github.io/getting-started/introduction

运行以下命令首先安装它:

    npm install --save react-bootstrap

然后将其包含在您的文件中:

    import Button from 'react-bootstrap/lib/Button';

编辑:按照评论中的建议添加样式:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">