React-style - 从零开始学React

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

一个小案例，巩固有状态组件和无状态组件的使用

通过for循环生成多个组件

0. 数据：

CommentList = [
    { user: '张三', content: '哈哈，沙发' },
    { user: '张三2', content: '哈哈，板凳' },
    { user: '张三3', content: '哈哈，凉席' },
    { user: '张三4', content: '哈哈，砖头' },
    { user: '张三5', content: '哈哈，楼下山炮' }
]
1.数组渲染
2.jsx语法
3.抽离组件

style样式

//1. 可以外部引入css文件

style.css  避免组件样式覆盖  可以分模块定义   style.module.css
​
引入 import './style.css'    import style from './style.module.css'

// 2.使用普通的style样式，style 中不能直接写样式，此时不是真正的html 而是jsx语法，所写的都是一些js语句，

// 所以在次数，style = {{}} 外层{} 是jsx语法书写js代码的形式， 内层{}是一个对象来表现样式

// 样式优化1 样式提出来，作为js变量

const userStyle = {fontSize: '14px'};

// 样式优化2 如果有很多样式，可以统一保存在一个样式对象中

const styles = {
    item: {border: '1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 #ccc'},
    user: {fontSize: '14px'},
    content: {fontSize: '12px'}
}

// 样式优化3 把样式封装到js文件中。

style.js
export default{
    item: {border: '1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 10px #ccc'},
    user: {fontSize: '14px'},
    content: {fontSize: '12px'}
}
​
import styles from '@/components/styles.js'

css样式模块化

xxx.module.css

import xxxx from 'xxx.module.css'

npm run eject

webpack.config.js ==> module:true

less

• npm安装包
• 暴露config（不可逆）npm run eject
• 修改第一处，添加以下代码

• const lessRegex = /.less$/;
  const lessModuleRegex = /.module.less$/;
  

• 按照sass 修改less