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>