CommentList = [ { user: ''张三'', content: ''哈哈,沙发'' }, { user: ''张三2'', content: ''哈哈,板凳'' }, { user: ''张三3'', content: ''哈哈,凉席'' }, { user: ''张三4'', content: ''哈哈,砖头'' }, { user: ''张三5'', content: ''哈哈,楼下山炮'' }]
// JS打包入口文件// 1. 导入 React包import React from ''react''import ReactDOM from ''react-dom''// 导入评论列表样式【注意:这种样式是全局的】// import ''./css/commentList.css''// 导入评论列表组件import CommentList from ''./components/comment1/CommentList.jsx''ReactDOM.render(<div> <CommentList></CommentList></div>, document.getElementById(''app''))
import React from ''react''// 导入当前组件需要的子组件import CommentItem from ''./CommentItem.jsx''// 评论列表组件export default class CommentList extends React.Component { constructor(props) { super(props) // 定义当前评论列表组件的 私有数据 this.state = { cmts: [ { user: ''张三'', content: ''哈哈,沙发'' }, { user: ''张三2'', content: ''哈哈,板凳'' }, { user: ''张三3'', content: ''哈哈,凉席'' }, { user: ''张三4'', content: ''哈哈,砖头'' }, { user: ''张三5'', content: ''哈哈,楼下山炮'' } ] } } // 在 有状态组件中, render 函数是必须的,表示,渲染哪些 虚拟DOM元素并展示出来 render() { //#region 循环 评论列表的方式1,比较low,要把 JSX 和 JS 语法结合起来使用 /* var arr = [] this.state.cmts.forEach(item => { arr.push(<h1>{item.user}</h1>) }) */ //#endregion return <div> <h1 className="title">评论列表案例</h1> {/* 我们可以直接在 JSX 语法内部,使用 数组的 map 函数,来遍历数组的每一项,并使用 map 返回操作后的最新的数组 */} {this.state.cmts.map((item, i) => { // return <CommentItem user={item.user} content={item.content} key={i}></CommentItem> return <CommentItem {...item} key={i}></CommentItem> })} </div> }}
css-loader?modules&localIdentName=[name]_[local]-[hash:8]
:global()
定义全局样式webpack中的配置
module: { rules: [ { test: /\.css$/, use: [''style-loader'', ''css-loader?modules&localIdentName=[name]_[local]-[hash:5]''] }, // 通过 为 css-loader 添加 modules 参数,启用 CSS 的模块化 { test: /\.scss$/, use: [''style-loader'', ''css-loader'', ''sass-loader''] }, { test: /\.(png|gif|bmp|jpg)$/, use: ''url-loader?limit=5000'' }, { test: /\.jsx?$/, use: ''babel-loader'', exclude: /node_modules/ } ] }
.box{ border: 1px solid #ccc; padding-left: 15px; box-shadow: 0 0 6px #ccc; margin: 10px 0;}/* 注意:当启用 CSS 模块化之后,这里所有的类名,都是私有的,如果想要把类名设置成全局的一个类,可以把这个类名,用 :global() 给包裹起来 *//* 当使用 :global() 设置了全局的 类样式之后,这个类不会被重命名 *//* 只有私有的类才会被重命名 */:global(.title){ color:red; text-align: center;}.title{ color: green; font-size: 16px;}.body{ font-size: 14px; color:red;}
import React from ''react''// 注意: 在使用 import 的时候,import 只能放到模块的 开头位置import inlineStyles from ''./cmtItemStyles.js''// 导入评论项的样式文件【这种直接 import ''../路径标识符'' 的 CSS 导入形式,并不是模块化的CSS】// import ''../../css/commentItem.css''// 默认情况下,如果没有为 CSS 启用模块化,则接收到的 itemStyles 是个空对象,因为 .css 样式表中,不能直接通过 JS 的 export defualt 导出对象// 当启用 CSS 模块化之后,导入 样式表得到的 itemStyles 就变成了一个 样式对象,其中,属性名是 在样式表中定义的类名,属性值,是自动生成的一个复杂的类名(防止类名冲突)import itemStyles from ''../../css/commentItem.css''console.log(itemStyles)// 封装一个 评论项 组件,此组件由于不需要自己的 私有数据,所以直接定义为 无状态组件export default function CommentItem(props) { // 注意: 如果要使用 style 属性,为 JSX 语法创建的DOM元素,设置样式,不能像网页中那么写样式;而是要使用JS语法来写样式 // 在 写 style 样式的时候,外层的 { } 表示 要写JS代码了,内层的 { } 表示 用一个JS对象表示样式 // 注意: 在 style 的样式规则中,如果 属性值的单位是 px, 则 px 可以省略,直接写一个 数值 即可 //#region 样式优化1 /* const boxStyle = { border: ''1px solid #ccc'', margin: ''10px 0'', paddingLeft: 15 } const titleStyle = { fontSize: 16, color: "purple" } const bodyStyle = { fontSize: 14, color: "red" } */ //#endregion //#region 样式优化2 把 样式对象,封装到唯一的一个对象中 /* const inlineStyles = { boxStyle: { border: ''1px solid #ccc'', margin: ''10px 0'', paddingLeft: 15 }, titleStyle: { fontSize: 16, color: "purple" }, bodyStyle: { fontSize: 14, color: "red" } } */ //#endregion /* return <div style={inlineStyles.boxStyle}> <h1 style={inlineStyles.titleStyle}>评论人:{props.user}</h1> <h3 style={inlineStyles.bodyStyle}>评论内容:{props.content}</h3> </div> */ // 注意: 当你怀念 vue 中 scoped 指令的时候,要时刻知道 , react 中并没有指令的概念 return <div className={itemStyles.box}> <h1 className={itemStyles.title}>评论人:{props.user}</h1> <h3 className={itemStyles.body}>评论内容:{props.content}</h3> </div>}
联系客服