html+antd 本地化

最新推荐文章于 2024-10-17 18:18:41 发布

原创最新推荐文章于 2024-10-17 18:18:41 发布 · 3.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html+antd本地化 #在html中使用antd #在html中使用react 与antd

antd 专栏收录该内容

3 篇文章

订阅专栏

本文分享了一次使用HTML结合Ant Design进行本地化的实战经验，详细展示了如何在项目中引入并配置Ant Design和React，包括必要的JS文件加载及常见问题解决，如moment.min.js的缺失导致的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为需求，所以才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" 这个样文件，

引入文件后，完美解决；

最后看下效果：