HTML文件里编写react代码，以及html里的antd无法设置中文~~

有些小伙伴在一个.html文件里编写前端代码，该文件放在公共文件public里，部署后进行展示。

当某个功能不参与登录校验就进行访问时，1、在项目里写一个路由提供访问，2、写一个.html进行地址访问，当然第一个是足够满足需求了。如果在初始化加载时需要执行的时间过长达到6-8秒，有些会接受不了时间过于加载过长，从而提出需求。这时就需要用到第二个方法，

一、采用html文件地址访问

1、采用这个方法的好处就是不用加载过多的项目初始化请求加载，按需引入请求

2、可以把一些资源包下载到本地，提高访问速度

二、统一样式

当然我们使用react框架，一般都是用的antd组件样式，然而我们自己书写还原react样式和功能是比较复杂的，例如分页那个组件功能。这是我们就可以HTML引入react以及antd。

三、资源引入

首先引入antd的样式css资源

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.24.8/antd.min.css" />

其次引入react书写所需资源

<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>

<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.24.8/antd.min.js"></script>

<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

在body中我们书写一个div用来插入react代码.

<div id="app"></div>

然后自己在写一个 <script type="text/babel"></script> 在里面即可书写react代码

 
<script type="text/babel">
class MessageBox extends React.Component {
state = {}
 componentDidMount() {}

return (<>react框架</>)
}

ReactDOM.render(<antd.ConfigProvider locale='zh_CN'><MessageBox /></antd.ConfigProvider>, document.getElementById('app'));
</script>

这样就可以把react书写进html里，

四、antd语言无法更改

博主使用了网络上<antd.ConfigProvider locale='zh_CN'> 这样说的设置成中文，当时我采用antd的分页组件，它并不是中文，而是英文版的格式，当然这是不满足我们需求的。博主想尽办法采用的是最基础的分页组件，自定义补上分页搜索框，

<div style={{position:'absolute',right:'0',bottom: '22px',display: 'flex',
              alignItems: 'center',
              padding: 0,
              marginTop: '16px',}}>跳转至<antd.Input value={this.state.inputVal} style=                        
               {{width:'50px'}}
              onChange={(e)=>{
                const inputValue = e.target.value;
      const regex = /^\d*$/;
      if (!regex.test(inputValue)||inputValue>this.state.total_A) {
      return;
    }
    this.setState({inputVal:inputValue})
              }}
              onBlur={(page)=>{
                const inputValue = page.target.value;
                if(inputValue>Math.ceil(this.state.total_A/this.state.pageSize_A) ||         
                   !page.target.value){
                  return
                }
                this.setState({
                  pageNo_A: page.target.value
                }, () => {
                  this.getList_A();
                });
              }}/>页</div>

自定义了这个跳转框。从而满足需求。