我正在尝试使用名为ant design的库中的一些pre-builtin react组件。此外,我想通过cdnjs调用react和组件库(不要使用webpack或其他)。我怎么能完成它?我的方法就像下面一样,它不适合我。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.1.6/antd.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.1.6/antd.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
import Button from 'antd/lib/button';
class Greeting extends React.Component {
render() {
return (<p><Button type="primary">Primary</Button></p>);
}
}
ReactDOM.render(
<Greeting />,
document.getElementById('root')
)
</script>
</body>
</html>
答案 0 :(得分:3)
您不需要导入,因为当您使用预建版本时,它已经注入全局变量调用&#39; antd&#39; (就像React一样)
我还更新了一些你的脚本,因为你需要React。 umd版本和antd需要带有语言环境版本。
但是,使用预建版本强烈不推荐要小心。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://unpkg.com/antd/dist/antd.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://unpkg.com/moment/min/moment-with-locales.js"></script>
<script src="https://unpkg.com/antd/dist/antd-with-locales.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { Button } = antd;
class Greeting extends React.Component {
render() {
return (<p><Button type="primary">Primary</Button></p>);
}
}
ReactDOM.render(
<Greeting />,
document.getElementById('root')
)
</script>
</body>
</html>