react学习三：渲染评论列表案例

JS打包入口文件main.js：

// 导入 React包
import React from 'react'
import ReactDOM from 'react-dom'
// 导入评论列表组件
import CommentList from './components/comment1/CommentList.jsx'

ReactDOM.render(<div>
  <CommentList></CommentList>
</div>, document.getElementById('app'))

评论列表组件CommentList，该组件又会包含评论列表选项组件CommentItem：

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: 'exid主唱nim' },
        { user: '安孝珍', content: 'exid rapper nim' },
        { user: '安喜延', content: 'exid副主唱&领舞nim' },
        { user: '徐慧潾', content: 'exid主唱nim' },
        { user: '朴正花', content: 'exid主舞nim' }
      ]
    }
  }
  // 在 有状态组件中， render 函数是必须的，表示，渲染哪些 虚拟DOM元素并展示出来
  render() {
    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>
  }
}

注意如果没有key属性标识评论列表选项的每一个组件就会报错

评论列表选项组件CommentItem：

因为不要使用私有数据，所以使用function函数创建一个组件就行

import React from 'react'
import itemStyles from '../../css/commentItem.css'
console.log(itemStyles)
export default function CommentItem(props) {
  return <div className={itemStyles.box}>
    <h1 className={itemStyles.title}>评论人：{props.user}</h1>
    <h3 className={itemStyles.body}>评论内容：{props.content}</h3>
  </div>
}

引用样式是通过启用css样式表文件的模块：

步骤一：在webpack.config.js中为css-loader启用模块化

{ test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[name]_[local]-[hash:5]'] }, 

modules 参数：启用 CSS 的模块化

localIdentName参数：重命名私有的类（默认会把私有类的类名变成hash值）

步骤二：编写样式

当启用 CSS 模块化之后，这里所有的类名，都是私有的，如果想要把类名设置成全局的一个类，可以把这个类名，用 :global() 给包裹起

当使用 :global() 设置了全局的 类样式之后，这个类不会被重命名(变成hash值，calss="title"）

只有私有的类才会被重命名

.box{
  border: 1px solid #ccc;
  padding-left: 15px;
  box-shadow: 0 0 6px #ccc;
  margin: 10px 0;
}
:global(.title){
  color:red;
  text-align: center;
}
.title{
  color: green;
  font-size: 16px;
}

.body{
  font-size: 14px;
  color:red;
}

不直接导入样式表import '../../css/commentItem.css'，而是通过启用CSS 模块化的原因：

如果没有为 CSS 启用模块化，则接收到的 itemStyles 是个空对象，因为 .css 样式表中，不能直接通过 JS 的 export defualt 导出对象

当启用 CSS 模块化之后，导入 样式表得到的 itemStyles 就变成了一个 样式对象，其中，属性名是 在样式表中定义的类名，属性值，是自动生成的一个复杂的类名（防止类名冲突）

vue中可以使用scoped 指令让组件自己的样式不被全局共享，但是 react 中并没有指令的概念，组件中使用的样式可能会被别的样式表合并或者替换掉

还有别的办法也可以使样式私有化：

比如不通过导入样式表，直接编写行内样式的时候

  return <div style="border:1px solid #ccc;">
    <h1>评论人：{props.user}</h1>
    <h3>评论内容：{props.content}</h3>
  </div> 

像编写网页代码那样写行内样式的话会报错：

解决办法：

在 写 style 样式的时候，外层的 { } 表示 要写JS代码了，内层的 { } 表示 用一个JS对象表示样式
在 style 的样式规则中，如果 属性值的单位是 px, 则 px 可以省略，直接写一个 数值 即可

  return <div style={{border:'1px solid #ccc',margin:'10px',paddingLeft:15}}>
    <h1>评论人：{props.user}</h1>
    <h3>评论内容：{props.content}</h3>
  </div> 

对以上的行内样式进行样式优化：

样式优化1：

   const boxStyle = { border: '1px solid #ccc', margin: '10px 0', paddingLeft: 15 }
   const titleStyle = { fontSize: 16, color: "purple" }
   const bodyStyle = { fontSize: 14, color: "red" } 
   return <div style={boxStyle}>
    <h1 style={titleStyle}>评论人：{props.user}</h1>
    <h3 style={bodyStyle}>评论内容：{props.content}</h3>
  </div> 

样式优化2：

把 样式对象，封装到唯一的一个对象中

 const inlineStyles = {
    boxStyle: { border: '1px solid #ccc', margin: '10px 0', paddingLeft: 15 },
    titleStyle: { fontSize: 16, color: "purple" },
    bodyStyle: { fontSize: 14, color: "red" }
  }
 return <div style={inlineStyles.boxStyle}>
    <h1 style={inlineStyles.titleStyle}>评论人：{props.user}</h1>
    <h3 style={inlineStyles.bodyStyle}>评论内容：{props.content}</h3>
  </div>