followed by the previous question, if the introduction of React+antd, in an ordinary html page has been typed, the code below will work normally.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>Antd</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.4.3/antd.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.4.3/antd.min.js"></script>
</head>
<body>
<div id="message1">xx</div>
<script type="text/babel" src="button.js"></script>
</body>
</html>
button.js
ReactDOM.render(
<div>
<antd.Button type="primary">Primary</antd.Button>
<antd.Button>Default</antd.Button>
<antd.Button type="dashed">Dashed</antd.Button>
<antd.Button type="danger">Danger</antd.Button>
<antd.Input placeholder="Basic usage" />
<antd.Switch defaultChecked />
<antd.TimePicker defaultOpenValue={moment("00:00:00", "HH:mm:ss")} />
</div>
, document.getElementById("message1"));
you can see that button.js
can be called with antd
plus the name of the component. The problem with
is that I want to test antd-mobile, again and fail. I take it for granted and replace it with antd-mobile.js
to replace the antd-mobile in it with my own name without a hyphen, as follows:
original code
/*!
*
* antd-mobile v2.1.8
*
* Copyright 2015-present, Alipay, Inc.
* All rights reserved.
*
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === "object" && typeof module === "object")
module.exports = factory(require("react"), require("react-dom"));
else if(typeof define === "function" && define.amd)
define(["react", "react-dom"], factory);
else if(typeof exports === "object")
exports["antd-mobile"] = factory(require("react"), require("react-dom"));
else
root["antd-mobile"] = factory(root["React"], root["ReactDOM"]);
I changed the following code to replace antd-mobile with m
/*!
*
* antd-mobile v2.1.8
*
* Copyright 2015-present, Alipay, Inc.
* All rights reserved.
*
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === "object" && typeof module === "object")
module.exports = factory(require("react"), require("react-dom"));
else if(typeof define === "function" && define.amd)
define(["react", "react-dom"], factory);
else if(typeof exports === "object")
exports["m"] = factory(require("react"), require("react-dom"));
else
root["m"] = factory(root["React"], root["ReactDOM"]);
so you can actually quote it with the < m.InputItem > button < / m.InputItem >
.
so my question is how to quote antd-mobile properly without changing it!
complete code is attached (the following code does not work properly when an error is reported)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>Antd</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd-mobile/2.1.8/antd-mobile.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd-mobile/2.1.8/antd-mobile.js"></script>
</head>
<body>
<div id="message1">xx</div>
<script type="text/babel" src="button-m.js"></script>
</body>
</html>
button-m.js
ReactDOM.render(
<div>
<m.Button type="primary">primary</m.Button>
</div>
, document.getElementById("message1"));