我刚安装了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文件中.这是不可能的!
解决方法
由于您在没有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);
原文地址:https://www.jb51.cc/js/158028.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。