React Bootstrap 无法渲染答案

【问题标题】：React Bootstrap fails to renderReact Bootstrap 无法渲染
【发布时间】：2016-01-05 21:09:13
【问题描述】：

我刚刚安装了 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 文件中。这是不可能的！

【问题讨论】：

你能检查一下 Chrome 开发者工具的错误，或者，也许是 Firebug？
我尝试了console.log(buttonInstance) 并得到了两个错误：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 文档中的教程绝不是错误的
您使用的是哪个版本？最新版本需要 React 0.14。
0.13.3。但即使我尝试包含 React 0.14，它仍然不起作用

标签： javascript css twitter-bootstrap reactjs react-bootstrap

【解决方案1】：

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

【讨论】：

我认为您可以var ButtonToolbar = ReactBootstrap.ButtonToolbar 并使您的代码更具可读性。还有var Button = ReactBootstrap.Button。你会有类似<Button bsStyle="warning">Warning</Button> `