react-react中的css+評論組件

一個小案例，鞏固有狀態組件和無狀態組件的使用

通過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>
}