React Bootstrap 无法渲染
Posted
技术标签:
【中文标题】React Bootstrap 无法渲染【英文标题】：React Bootstrap fails to render 【发布时间】：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，它仍然不起作用
【参考方案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> `以上是关于React Bootstrap 无法渲染的主要内容，如果未能解决你的问题，请参考以下文章
从 react-bootstrap-table2 的列渲染器中使用 Location hook 获取位置路径
利用Spring boot+react快速搭建一个博客站点(前后端完全分离)