Question

我正在尝试使用react-bootstrap做反应并使用命令

安装它

npm install react-bootstrap --save

但它不起作用，也尝试添加外部react-bootstrap.js但仍然出错

error  'ReactBootstrap' is not defined  no-undef
 ✖ 1 problem (1 error, 0 warnings)

我在这段代码中做错了什么。这是HTML文件

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App</title>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"  />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.27.3/react-bootstrap.js"></script>
</head>

<body>
<div id="root"></div>
</body>
</html>

这是JSX文件。

import React, { Component } from 'react';
import logo from './logo.svg';


class Hello extends Component{
render()
{
let { Button} = ReactBootstrap.Button;
    return(
    <div>
        <img src={logo} className="App-logo" alt="react-logo"/>
        <h1> Trying react</h1>
        <Button>Noob</Button> 
      </div>

    );
}
}
export default Hello;

这里是其他文件中的渲染代码。

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';
import './index.css';

ReactDOM.render(
 <Hello />,
  document.getElementById('root')
);

相同的代码工作正常，如果我删除

 let { Button} = ReactBootstrap.Button;

和

<Button>Noob</Button>

来自JSX文件。

Answer 1

您需要从react-bootstrap导入该组件，例如 - var Alert = require('react-bootstrap').Alert; 有关详细信息，请查看此内容 - https://react-bootstrap.github.io/getting-started.html

谁能告诉我如何使用反应引导反应？

1 个答案: