在create-react-app项目中引入antd+mobx+less

引入antd和less

这个antd官网写的很详细，我也是根据官网操作的。

引入antd @craco/craco craco-less 这三个包

npm i --save antd @craco/craco  craco-less

将样式改成less

/* src/App.js */
- import './App.css';
+ import './App.less';
/* src/App.less   这里的文件名改为App.less, 然后引入App.js*/
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';

创建配置文件 craco.config.js， 文件如下

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

修改package.json

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

这样就引入成功了，使用方式

import React from 'react';
import { Button } from 'antd';

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

接下来是mobx的引入

在src下新建一个stores文件夹，存放stores主文件

引入mobx mobx-react

npm i --save mobx mobx-react

然后在入口文件这样写

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import stores from './stores';  //引入我们刚刚新建的stores主文件
import { Provider } from 'mobx-react';


ReactDOM.render(
{/*这个将我们所有储存在store里的数据挂载到组件的this.props中*/}
  <Provider {...stores} >
    <App />
  </Provider>,
  document.getElementById('root')
);

在你想要用store的组件中，新建一个store文件

store.js里面这样写

import {observable, action} from 'mobx';

class LoginStore {
    @observable loginStore = {
        account: '222',
        password: ''
    }
}
export default new LoginStore;

然后再store主文件src/stores/index.js引入

import LoginStore from '../pages/login/store';

export default {LoginStore};

但在这里就会遇到一个问题

Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled (5:5):
这个问题的解决方式网上很多，大多都是用eject解决，我们也可以用craco来解决

安装下面的依赖

npm install --save @babel/plugin-proposal-decorators

修改craco.config.js 如下

const CracoLessPlugin = require('craco-less');

module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: { '@primary-color': '#1DA57A' },
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
    babel: {
        plugins: [
            ["@babel/plugin-proposal-decorators", { legacy: true }]
        ]
    }
};

再重启问题就解决了。

当我要使用的时候，又报了个错误
× TypeError: Cannot read property ‘componentWillReact’ of undefined
这个错误的原因是mobx-react 6.1版本删除了componentWillReact，这个问题的解决方法就是给mobx-react降版本就可以了。

npm i mobx-react@5.4.3 --save 

使用方法

import React, {Component} from 'react';
import './index.less';
import {Input } from 'antd';
import { observer } from 'mobx-react';

@observer(['LoginStore'])
class Login  extends Component {
  
  render() {
    const {loginStore} = this.props.LoginStore;
    console.log(loginStore.account)  // 成功输出222
    return (
      <div className="login">
          <div className="container">
            <h1>用户登陆</h1>
            <Input placeholder="输入账号" className="account"/>
            <Input.Password placeholder="输入密码" className="password"/>
          </div>
      </div>
    );
  }
}

export default Login;