admin管理员组文章数量:1279184
I've just installed React Bootstrap and started to learn using it
I started by doing tutorials on .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>
Then I copied total tutorial of React Bootstrap Button, like this:
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);
I don't know what the hell is going on. Nothing is rendered. Did I do anything wrong? I downdloaded React Bootstrap and already included it in HTML file. This is impossible!
I've just installed React Bootstrap and started to learn using it
I started by doing tutorials on http://react-bootstrap.github.io/ponents.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>
Then I copied total tutorial of React Bootstrap Button, like this:
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);
I don't know what the hell is going on. Nothing is rendered. Did I do anything wrong? I downdloaded React Bootstrap and already included it in HTML file. This is impossible!
Share Improve this question asked Oct 8, 2015 at 9:59 necrofacenecroface 3,46513 gold badges48 silver badges71 bronze badges 4- Can you check the error of Chrome developer tool, or, maybe, Firebug? – Alex Antonov Commented Oct 8, 2015 at 10:02
-
I tried
console.log(buttonInstance)and got 2 errrors: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 definedIt's no way the tutorial in documentation is wrong – necroface Commented Oct 8, 2015 at 10:06 - Which version are you using? The most recent version requires React 0.14. – Jonny Buchanan Commented Oct 8, 2015 at 10:10
- 0.13.3. But even when I try to include React 0.14, it still doesn't work – necroface Commented Oct 8, 2015 at 10:12
1 Answer
Reset to default 11Since you are loading the distribution bundle without CommonJS or AMD you'll need to access the global ReactBootstrap for all the ponents.
So change your example code to:
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);
本文标签： javascriptReact Bootstrap fails to renderStack Overflow
版权声明：本文标题：javascript - React Bootstrap fails to render - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741211640a2359238.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论