Kann mir jemand sagen, wie man React Bootstrap in reagieren?

Ich versuche, in reagieren-Bootstrap zu verwenden reagieren und installiert es vonKann mir jemand sagen, wie man React Bootstrap in reagieren?

Befehl

npm install react-bootstrap --save

aber es funktioniert nicht, versucht auch externe reagieren-bootstrap.js hinzufügen, aber immer noch einen Fehler bekommen

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

Was mache ich falsch in diesem Code. Dies ist HTML-Datei

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

Dies ist JSX-Datei.

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;

und hier der Rendering-Code in andere Datei.

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

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

der gleiche Code funktioniert gut, wenn ich

let { Button} = ReactBootstrap.Button;

und

<Button>Noob</Button>

von JSX-Datei entfernen.

Quelle

2017-01-17 nik7

Sie müssen diese Komponente importieren aus reagieren-Bootstrap wie - var Alert = require('react-bootstrap').Alert; Für weitere Informationen wenden Sie sich bitte einen Blick auf diese - https://react-bootstrap.github.io/getting-started.html

Quelle

2017-01-17 07:50:10

Hallo, @Rohan diesem Link https://github.com/react- bootstrap/react-bootstrap/issues/77. hier jemand erwähnen, dass 'das Skript react-bootstrap.js fügt eine globale Variable ReactBootstrap. Sie müssen dann Verweise auf die einzelnen Komponenten erstellen, um sie mit JSX zu verwenden. – nik7

Fügen Sie dies an der Spitze Ihrer jsx-Datei - 'Import {Button} von 'Reagieren-bootstrap';' und entfernen Sie 'let {Button} = ReactBootstrap.Button;' –

danke @ Rohan es funktionierte. – nik7

Kann mir jemand sagen, wie man React Bootstrap in reagieren?

Antwort

Verwandte Themen