html+antd 本地化_savelifeme666的博客-程序员资料

技术标签： antd 在html中使用react 与antd html+antd本地化在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文件你们自己找吧，太晚了，还没有吃饭，太饿了！

本文链接：https://blog.csdn.net/savelifeme666/article/details/93769838

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Luogu P2602 [ZJOI2010]数字计数_Top_xiao的博客-程序员资料

链接:https://www.luogu.org/problem/P2602/*首先我们要知道, 从 0 - 99, 0 - 999, 0 - 9999 , 每个数字出现的次数是一样的. 我们先算在 i 的位置, x 这个数出现了多少次, 9999 假设有四位数,我们现在推到第五位,那么第五位的数 x 出现的所有数就是, x + (0-9999), (0 - 9)+((0 -...

你应该知道的前端面试题（万字总结）_cyg_l02的博客-程序员资料

前言自己整理出来的一些前端工程师必备的面试题，面试中出场率很高，相信小伙伴在找工作或者跳槽中能够顺利找到自己想要的工作。Html1、DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义？DOCTYPE的作用是告诉浏览器使用哪种版本的HTML规范来渲染文档。当DOCTYPE不存在或者形式不正确时会导致HTML文档以混杂模式解析文档。标准模式以浏览器支持的最高标准运行，混杂模...

石家庄铁道大学 C程序设计代码第8天_一生长共月亏盈的博客-程序员资料

链表自学，b站视频自己找。建议完整看一个。对于理解很有帮助的。第八天代码也存在可以完善的地方。祝大家学习愉快！#include<stdio.h>#include<string.h>struct jd{int a;//数据域struct jd next;//指针域}p;struct jd cj(),x1(struct jd k),x3(struct...

< IOS > X-code 5.1 x86 - 64 编译问题_weixin_30892037的博客-程序员资料

关于xcode 5.1 x86 - 64 编译问题坐等了N久，终于IOS 7.1 发布了，作为一个果粉，忍不住第一时间升级了。结果用设备测试的时候，出问题了，一直检测不到设备，哈哈，纠结了半天，才想到原来是7.1 问题了。原来Xcode版本不得低于设备版本，IOS7.1 对应的是 Xcode 5.1，果断的升级Xcode。Xcode5.1 完成之后，打开以前的项...

GDB调试的一系列博客_weixin_34416754的博客-程序员资料

2019独角兽企业重金招聘Python工程师标准>>> ...

HLSL Intrinsic Functions_hlsl bit_警醒与鞭策的博客-程序员资料

//Cg 3.1 Toolkit Documentation 补充bitCount- return the number of bits set in a bitfield.bitfieldExtract- return an extracted range of bits from a bitfield.bitfieldInsert- returns an extrac...