评论列表组件

最新推荐文章于 2024-06-23 09:43:47 发布

fanxiao_168

最新推荐文章于 2024-06-23 09:43:47 发布

阅读量1.6k

点赞数

分类专栏： React 文章标签： style 列表组件

本文链接：https://blog.youkuaiyun.com/weixin_42206243/article/details/93004639

版权

React 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何使用React构建一个评论列表组件，包括CmtList和CmtItem两个子组件，以及在styles.js中进行样式定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

index.js

// 1. 导入包
import React from 'react'
import ReactDOM from 'react-dom'

//导入评论组件
import CmtList from '@/components/CmtList'

// 3. 调用 render 函数渲染
ReactDOM.render(<div>
 
<CmtList></CmtList>

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

CmtList.jsx

import React from 'react'
import CmtItem from "@/components/CmtItem"

export default class CmtList extends React.Component{
    constructor(){
      super()
      this.state = {
  
        CommentList:[
          {id:1,user:"张三",content:"哈哈，沙发"},
          {id:2,user:"李四",content:"哈哈，板凳"},
          {id:3,user:"王五",content:"哈哈，凉席"},
          {id:4,user:"赵六",content:"哈哈，砖头"},
          {id:5,user:"田七",content:"哈哈，楼下扇贝"}
        ]
      }
    }
  
    render(){
  
      return <div>
        <h1 style={{textAlign:'center',fontSize:25}}>这是评论列表组件</h1>
        {this.state.CommentList.map(item => <CmtItem {...item} key = {item.id}></CmtItem>)}
  
      </div>
  
    }
}

CmtItem.jsx

import React from 'react'

//第一层封装:将 样式对象 和 UI 结构分离
// const itemStyle = {border:'1px dashed #ccc',margin:'10px',padding:'10px',boxShadow:'0 0 10px #ccc'}
// const userStyle = {fontSize:'14px'}
// const contentStyle = {fontSize:'12px'}

//第二层封装:合并成一个大的样式对象
// const styles = {
//     item : {border:'1px dashed #ccc',margin:'10px',padding:'10px',boxShadow:'0 0 10px #ccc'},
//     userStyle : {fontSize:'14px'},
//     contentStyle : {fontSize:'12px'}
// }

//第三层封装: 抽离为 单独的 样式表 模块
import styles from '@/components/styles'

export default function CmtItem (props){
    return <div style={styles.item}>
    <h1 style={styles.userStyle} >评论人:{props.user}</h1>
    <p style={styles.contentStyle}>评论内容:{props.content}</p>
    </div>
}

styles.js

export default {
    item : {border:'1px dashed #ccc',margin:'10px',padding:'10px',boxShadow:'0 0 10px #ccc'},
    userStyle : {fontSize:'14px'},
    contentStyle : {fontSize:'12px'}
}