0
は私が反応中に、ブートストラップを反応させる使用しようとコマンド反応のブートストラップをどのように使用するか教えてもらえますか？
npm install react-bootstrap --save
を使用して、それをインストールしますが、それは働いていない、また、外部の反応-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')
);
私はJSXファイルから
let { Button} = ReactBootstrap.Button;
と
<Button>Noob</Button>
を削除した場合、同じコードは、正常に動作しています。
こんにちは、このリンクをチェックし@Rohan https://github.com/react-ブートストラップ/反応ブートストラップ/ issues/77。 ここに誰かが言及したのは 'react-bootstrap.jsスクリプトはグローバルvar ReactBootstrapを追加します。 JSXでそれらを使用するには、個々のコンポーネントへの参照を作成する必要があります。 – nik7
これをjsxファイルの先頭に追加してください - 'react-bootstrap 'から' import {Button}'; ' と' let {Button} = ReactBootstrap.Button;を削除してください、 –
@ Rohanに感謝します。 – nik7