当前位置： 移动技术网 > IT编程>开发语言>JavaScript > react-react中的css+评论组件

react-react中的css+评论组件

2020年01月17日  | 移动技术网IT编程  | 我要评论

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

通过for循环生成多个组件

  1. 数据：
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模块化

  1. 可以在webpack.config.js中为css-loader启用模块化：
    css-loader?modules&localidentname=[name]_[local]-[hash:8]
  2. 使用: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/ }
    ]
  }

style样式

.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>
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网