阵营引导无法呈现

我刚刚安装引导作出反应，并开始使用它阵营引导无法呈现

我开始做教程上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>

学习然后我复制阵营引导按钮的总介绍，像这个：

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文件中。这是不可能的！

来源

2015-10-08 necroface

你可以检查Chrome开发者工具，或者，也许，萤火虫的错误？ – asiniy

我尝试了'console.log（buttonInstance）'并得到2个错误： '未捕获的错误：发生了极小的异常;使用非缩小的开发环境提供完整的错误消息和其他有用的警告。未捕获的ReferenceError：ButtonToolbar未定义＃这不是在文档中的教程是错误的 – necroface

您正在使用哪个版本？最新版本需要React 0.14。 –

由于您正在加载没有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);

来源

2015-10-09 14:27:24

我认为你可以'var ButtonToolbar = ReactBootstrap.ButtonToolbar'并且让你的代码更具可读性。另外'var Button = ReactBootstrap.Button'。你会得到类似'' ' – Spyros

阵营引导无法呈现

回答

相关问题