简单背景
之前使用的是Vue，由于公司开发的新项目，UI 设计用到了内部组件库，仅支持 React 框架，所以转而学习 React，为避免之后重复遇到类似问题，因此做个简单的爬坑记录。
启动
- Node：v10.15.2
- 创建项目：注意 project-name 不能有大写字母，也不能用驼峰命名法
npx create-react-app project-name
npx 是 npm 内部自带的安装工具，使用这种方式可以不必全局安装 create-react-app。 - 运行项目：想更换 start 这个名字，可以在 package.json 中修改
npm start
注意，必须 cd 至 project-name 目录下 - 安装 React 路由
npm install --save react-routerornpm install --save react-router-dom
react-router 与 react-router-dom 使用时的区别 - 安装 sass（若使用 less 同理）
npm install node-sass --save-dev - 配置路径，即使用 “@” 符号代替 “src”，好处是不再使用相对路径，代码方便迁移
1.首先创建 Git 仓库，运行git init、git add -u、git commit -m ''，这是必须的一步
2.然后运行npm run eject，注意，此过程不可逆，运行后终端也会提示确认命令， 输入Y确认后，会安装一大堆依赖，package.json 文件狂飙到一百三十多行，这里就不截图了，太占地方。
这里的依赖会安装至 dependencies 下，不过在运行npm run build命令打包时不会把所有包都加载进去，此步只是用来显示 webpack 配置项，方便修改。
3.运行命令后会生成两个文件，分别是config和scripts，我们找到config下的webpack.config.js打开，如下图：
image.png
4.搜索alias并添加代码，路径可以自由定义，如下所示：
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
'@': path.resolve(__dirname, '../src')
},
- 安装 React Developer Tools，这步非必选，目的是在控制台调试 React 项目时可以方便的看到组件列表，如下所示：
image.png
安装方法：直接在 Chrome 浏览器中的网上应用商店搜索这个名字，点击下载安装即可，应用商店入口在：浏览器右上角是三个点 -> 更多工具 -> 扩展程序 -> 左上角图标 -> 底部链接（这样都找不到的就退坑吧 = - =）
问题与解决方式
- 尝试将 react-router 封装至单独的文件中，报错如下：
Please userequire("history").createBrowserHistoryinstead ofrequire("history/createBrowserHistory"). Support for the latter will be removed in the next major release.
修改前代码：
import {lazy} from 'react';
const Home = lazy(() => import('@/views/Home'))
import createHistory from 'history/createBrowserHistory';
export const history = createHistory();
export const routes = [ ... ]
修改后代码：
import {lazy} from 'react';
const Home = lazy(() => import('@/views/Home'))
import { createBrowserHistory } from 'history';
export const history = createBrowserHistory();
export const routes = [ ... ]
- react 的 <img /> 标签中 src 属性设置无效，图片不显示问题
解决办法：
第一种方式：Import 导入后引用
import img from "@/assets/top_bg.png"
<img src={img} alt=""/>
第二种方式：require 直接引用
<img src={require('@/assets/top_bg.png')} alt=''/>
第三种方式：尝试在 utils 中封装公有方法，遍历 assets 下所有图片名称和路径，以 key-value 的方式存储，页面中调用方法取出对应图片即可，代码如下：
// 写在 utils 中的公共方法 （待优化）
getImgs = () => {
const requireContext = require.context("@/assets", true, /^\.\/.*\.png$/);
const projectImgs = requireContext.keys().map(requireContext)
let imgs = {}
for (let i = 0; i < projectImgs.length; i++) {
const key = requireContext.keys()[i];
let nameUrl = key.split('./')[1]
let name = nameUrl.split('.')[0].replace(/\//g, "_")
const element = projectImgs[i];
imgs[name] = element
}
return imgs
}
// 在页面中引用：
import Utils from '@/utils/utils.js'
<img src={Utils.getImgs().top_bg} className='img-bg' alt=''/>
生成的数据格式如下图：
image.png
注意：图片路径必须是图中显示的 /static/media/***.*** 格式，否则和直接填入路径没有区别，都不会显示，该路径可以直接用 requireContext.keys().map(require.context("@/assets", true, /^\.\/.*\.png$/)) 来获取，后续数据处理因人而异，这里只是举个例子。
- 顶部导航栏，动态添加 className：直接上 ES6 语法
<li className={`menu-item ${menuIndex === index ? "menuActive" : null}`}>{item}</li>
- 在 for 循环中动态更改样式
function NewsList(props) {
const newsArr = props.newsArr;
const listItems = newsArr.map((item, index) =>
<li className='news-item' key={index} style={{borderTop: (index === 0) ? 'none' : '1px solid #dee2f8'}}>
<p className="news-content ellipse">{item.content}</p>
</li>
);
return (
<ul className="news-list">{listItems}</ul>
);
}
- 组件之间传递鼠标事件，子组件调用父组件的事件并传入自定义参数（搞了好久。。）
// 父组件
<ImgsList contentArr={this.state.contentArr} onMouseEn={this.handleMouseEnter}></ImgsList>
// 子组件
function ImgsList(props) {
let contentArr = props.contentArr
const listItems = contentArr.map((item, index) =>
<li onMouseEnter={()=>{props.onMouseEn(index)}} key={index}></li>
);
return (
<ul className="img-box">{listItems}</ul>
);
}
注意：子组件中的事件必须使用 function_name={ () => {} } 这种函数的方式，否则默认都是普通函数，不会触发鼠标事件
- 在 JSX 中进行条件渲染，类比 Vue 的 v-if 功能
<div>
<p className='title'>条件渲染</p>
{ conidtion &&
<p className='content' >{item.content}</p>
}
</div>
- Expected an assignment or function call and instead saw an expression no-unused-expressions
代码如下：
function CardItem(props) {
const listItems = cardArr.map((item, index) => {
<li className="card-item" key={index}>
<div className="text-box">
<p className='title'>{item.title}</p>
<p className='content'>{item.content}</p>
<div className="btn-box">
<Button type='primary' className='btm-button'>免费试用</Button>
<Button type='primary' className='btm-button right-button'>文档介绍</Button>
</div>
</div>
</li>
})
return (
<ul className="card-box">{listItems}</ul>
)
}
产生错误的原因是因为没有返回值，锁定第二行，把结尾的那个配套的大括号删掉，直接把内容作为返回值继续，解决
function CardItem(props) {
const listItems = cardArr.map((item, index) =>
<li className="card-item" key={index}>
<div className="text-box">
<p className='title'>{item.title}</p>
<p className='content'>{item.content}</p>
<div className="btn-box">
<Button type='primary' className='btm-button'>免费试用</Button>
<Button type='primary' className='btm-button right-button'>文档介绍</Button>
</div>
</div>
</li>
)
return (
<ul className="card-box">{listItems}</ul>
)
}
- npm run build 编译打包后页面空白
解决办法：使用HashRouterHashHistory替换BrowserRouterBrowserHistory
