React Bootstrap 渲染失败
React Bootstrap fails to render
我刚刚安装了 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);
我刚刚安装了 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);