在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;