不能在 React 中使用 Bootstrap？

Question

I'm trying to use a button in a reactJS file. This is the code I have

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

But react is giving me:

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

I've included bootstrap in the dependcies in package.json, as well as popper.js and jquery, and I've tried npm install bootstrap. I also made sure to

import 'bootstrap/dist/css/boostrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

in my mainJs file.

I also tried using with no luck.

Answer 1

AMR,

Looks like you are trying to use components so i believe you are trying to use React-Bootstrap. Here it goes: https://react-bootstrap.github.io/getting-started/introduction

Run following to install it first:

    npm install --save react-bootstrap

then include it in your file:

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

EDIT: Adding styles as suggested in comments:

<!-- 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">

Answer 2

Yes you can. But I recommend you check this library out. ReactStrap