React Bootstrap nie udzieli

Właśnie zainstalowano React Bootstrap i zaczął uczyć go używaćReact Bootstrap nie udzieli

zacząłem wykonując tutoriali na http://react-bootstrap.github.io/components.html

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Demo</title> 
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"/> 
    <script src="js/react-0.13.3/build/react.min.js"></script> 
    <script src="js/react-bootstrap.min.js"></script> 
    <script src="js/react-0.13.3/build/JSXTransformer.js"></script> 
    <script src="js/jquery-2.1.4.min.js"></script> 
    <script src="demo_bootstrap_react.js" type="text/jsx"></script> 
</head> 
<body> 
    <div id="test"></div> 
</body> 
</html>

Potem kopiowane całkowitą tutorial React Bootstrap przycisk, jak to:

const buttonsInstance = (
    <ButtonToolbar> 
    {/* Standard button */} 
    <Button>Default</Button> 

    {/* Provides extra visual weight and identifies the primary action in a set of buttons */} 
    <Button bsStyle="primary">Primary</Button> 

    {/* Indicates a successful or positive action */} 
    <Button bsStyle="success">Success</Button> 

    {/* Contextual button for informational alert messages */} 
    <Button bsStyle="info">Info</Button> 

    {/* Indicates caution should be taken with this action */} 
    <Button bsStyle="warning">Warning</Button> 

    {/* Indicates a dangerous or potentially negative action */} 
    <Button bsStyle="danger">Danger</Button> 

    {/* Deemphasize a button by making it look like a link while maintaining button behavior */} 
    <Button bsStyle="link">Link</Button> 
    </ButtonToolbar> 
); 

ReactDOM.render(buttonsInstance, mountNode);

Nie wiem, co się do cholery dzieje. Nic nie jest renderowane. Czy robię coś źle? Downd załadowałem React Bootstrap i już włączyłem go do pliku HTML. To jest niemożliwe!

Źródło

2015-10-08 necroface

Czy można sprawdzić błąd w narzędziu Chrome deweloperskim lub, być może, Firebug? – asiniy

Próbowałem 'console.log (buttonInstance)' i dostałem 2 błędy: 'Uncaught Error: Minified exception occurred; użyj nieminified środowiska programisty, aby wyświetlić pełny komunikat o błędzie i dodatkowe pomocne ostrzeżenia. Niepowodzenie ReferenceError: ButtonToolbar nie jest zdefiniowany " Nie ma mowy, że samouczek w dokumentacji jest nieprawidłowy – necroface

Którą wersję używasz? Najnowsza wersja wymaga Reagowania 0.14. –

Ponieważ ładujesz pakiet dystrybucyjny bez CommonJS lub AMD, musisz uzyskać dostęp do globalnego ReactBootstrap dla wszystkich składników.

Więc zmienić przykładowy kod do:

const buttonsInstance = (
    <ReactBootstrap.ButtonToolbar> 
    {/* Standard button */} 
    <ReactBootstrap.Button>Default</ReactBootstrap.Button> 

    {/* Provides extra visual weight and identifies the primary action in a set of buttons */} 
    <ReactBootstrap.Button bsStyle="primary">Primary</ReactBootstrap.Button> 

    {/* Indicates a successful or positive action */} 
    <ReactBootstrap.Button bsStyle="success">Success</ReactBootstrap.Button> 

    {/* Contextual button for informational alert messages */} 
    <ReactBootstrap.Button bsStyle="info">Info</ReactBootstrap.Button> 

    {/* Indicates caution should be taken with this action */} 
    <ReactBootstrap.Button bsStyle="warning">Warning</ReactBootstrap.Button> 

    {/* Indicates a dangerous or potentially negative action */} 
    <ReactBootstrap.Button bsStyle="danger">Danger</ReactBootstrap.Button> 

    {/* Deemphasize a button by making it look like a link while maintaining button behavior */} 
    <ReactBootstrap.Button bsStyle="link">Link</ReactBootstrap.Button> 
    </ReactBootstrap.ButtonToolbar> 
); 

ReactDOM.render(buttonsInstance, mountNode);

Źródło

2015-10-09 14:27:24

Myślę, że możesz 'var ButtonToolbar = ReactBootstrap.ButtonToolbar' i uczynić swój kod nieco bardziej czytelnym. Również 'var Button = ReactBootstrap.Button'. Będziesz miał coś takiego jak '' ' – Spyros

Odpowiedz

Powiązane problemy