html+antd 本地化

因为需求，所以才html+antd 本地化的，其实我也不想这样写的，为了生存；

废话不多说，上代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>学习React！！</title><link rel="stylesheet" href="gantt/scripts/antdpro/antd.min.css" /></head><body><div id="testApp"></div></body>
</html>
<script src="gantt/scripts/antdpro/react.production.min.js"></script>
<script src="gantt/scripts/antdpro/react-dom.production.min.js"></script>
<script src="gantt/scripts/antdpro/babel.min.js"></script>
<script src="gantt/scripts/antdpro/moment.min.js"></script>
<script src="gantt/scripts/antdpro/antd.js"></script>
<script type="text/babel">const { Button, message } = antd;// 创建类class MessageBox extends React.Component {halderClick() {message.info('你刚才点了我一下!!!');}render() {return (<div style={{ padding: 24 }}><h2 style={{ font: 'red' }}>你好世界！！！</h2><Button type="primary" onClick={this.halderClick} style={{ margin: 24 }}>测试</Button></div>);}// 渲染ReactDOM.render(<MessageBox />, document.getElementById('testApp'), function() {console.log('渲染完成啦！！');});
</script>

踩坑记录：

运行起来一直保错：

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_9_moment___default(...) is not a function

Inline Babel script:3 Uncaught ReferenceError: antd is not defined

经过认真的缕思路，没有发现错误，上网查了之后发现原因了，之前少引一个 "moment.min.js" 这个样文件，

引入文件后，完美解决；

最后看下效果：

感谢 https://blog.csdn.net/bennyshi1998/article/details/82862425 这篇文章的博主，我遇到的问题和他的一样，
记录下自己遇到的点点滴滴；

关于里面所需要的js文件你们自己找吧，太晚了，还没有吃饭，太饿了！

html+antd 本地化相关推荐

ant引入html页面,antd引入普通html使用，将ant Design本地化
一直想着能本地化antd的,不用npm以及dva那么复杂的配置环境来开发,并且本地化以后对以后链接flask的模板渲染机制也能很好的结合.下面是具体的实现方法: 1.将react的相关链接引入: 也可 ...
AntD Button 图标集成 iconfont
1.概述近期,前端项目在做优化,优化点:Button组件图标加载. 问题描述:图片资源来自服务端返回的结果,虽然目前实现异步加载,但避免不了多次请求服务端就会造成性能问题,所以,就考虑到前端本地化资 ...
React项目中如何结合antd引入阿里图标（外联方式）
在Raect项目中,图标的使用不可避免,如何使用根据antd来使用阿里图标库? 一.在阿里图标库中选中自己需要的图标存到自己的项目当中并下载至本地二.1.在React项目的根目录下创建一个stati ...
在 react 里使用 antd
在 react 里使用 antd 在 powershell 里npm i antd 引入方式: import '../node_modules/antd/dist/antd.css'
mfc 应用程序语言进行本地化
在软件国际化的今天,资源从代码中独立出来,使在不同语言操作系统下能运行不同语言版本的程序,是很有意义的事. MFC 7.0 及更高版本提供对附属 DLL 的增强支持,该功能有助于创建针对多种语言进行本 ...
antd checkbox 默认选中_antd 开发的一些坑（一）
使用antd以来,有些东西总是现用现查,现总结一波,以提升开发效率一:表格下钻及默认展开一级 {treeData && treeData.length > 0 ? (<T ...
antd 表单提交，文件和表单内容一起提交，表单校验
用很简单的源码实现包含下列 antd 表单相关知识: 1.表单必填校验,规则校验 2.Upload 上传图片,获取上传图片的状态,如上传成功,上传失败,上传进度条,删除上传的文件 3.获取 Input ...
notification antd 弹窗使用示例
示例代码 import { notification } from 'antd';notification.error({description: '您的网络发生异常,无法连接服务器',message ...
dva + antd + mockjs 实现用户管理
1.安装dva-cli npm install dva-cli -g 2.创建应用 dva new dvadashboard [dvadashboard为项目名] 3.安装mockjs npm ins ...
多人开发情况下的字符串本地化
项目开发中,独立开发的还是少数.经常会有多人开发的情况,这种情况,如果多人同时操作本地化文件,极有可能会存在冲突. 另一方面,我们又不希望自己的本地化文件受到对方的污染,也就是说,我们不希望对方操作我 ...

html+antd 本地化

html+antd 本地化相关推荐

最新文章

热门文章