React Bootstrap не отображается

Я только что установил React Bootstrap и начал учиться его использовать

Я начал с руководств по 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>

Затем я скопировал полное руководство по React Bootstrap Button, например:

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);

Я не знаю, что, черт возьми, происходит. Ничего не визуализируется. Я сделал что-то не так? Я скачал React Bootstrap и уже включил его в файл HTML. Это невозможно!


reactjs javascript css twitter-bootstrap react-bootstrap
person necroface    schedule 08.10.2015    source источник
comment
Можете ли вы проверить ошибку инструмента разработчика Chrome или, может быть, Firebug?   -  person asiniy    schedule 08.10.2015
comment
Я попробовал console.log(buttonInstance) и получил 2 ошибки: Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings. Uncaught ReferenceError: ButtonToolbar is not defined Учебник в документации никоим образом не является неправильным.   -  person necroface    schedule 08.10.2015
comment
Какую версию вы используете? Самая последняя версия требует React 0.14.   -  person Jonny Buchanan    schedule 08.10.2015
comment
0.13.3. Но даже когда я пытаюсь включить React 0.14, он все равно не работает.   -  person necroface    schedule 08.10.2015

Ответы (1)


arrow_upward
11
arrow_downward

Поскольку вы загружаете пакет дистрибутива без CommonJS или AMD, вам потребуется доступ к глобальному ReactBootstrap для всех компонентов.

Поэтому измените код примера на:

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);
person Matt Smith    schedule 09.10.2015
comment
Я думаю, вы можете var ButtonToolbar = ReactBootstrap.ButtonToolbar сделать свой код более читабельным. Также var Button = ReactBootstrap.Button. У вас будет что-то вроде <Button bsStyle="warning">Warning</Button> ` - person Spyros; 24.03.2016