最全的react视频【黑马程序员】--第七章 评论列表案例(

目录

1.创建CmtList组件并渲染基本的组件结构

2. 将评论Item项抽离为单独的CmtItem组件

3. 将评论列表和评论项抽离为单独的组件

---

 

目标效果页面：

1.创建CmtList组件并渲染基本的组件结构

index.js

import React from 'react'
import ReactDOM from 'react-dom'


//使用class关键字定义父组件
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>这是评论列表</h1>

            {this.state.CommentList.map(item => <div key={item.id}>
                <h1>评论人 ： {item.user}</h1>
                <p>评论内容： {item.content}</p>
            </div>)}
        </div>
    }
}


//3. 调用render函数渲染
ReactDOM.render(<div> 
   123
   <CmtList></CmtList>
</div>, document.getElementById('app'))

2. 将评论Item项抽离为单独的CmtItem组件

import React from 'react'
import ReactDOM from 'react-dom'

//使用function定义自组件,因为其中的每一项都是通过item拿到的
function CmtItem(props){
    return <div>
    <h1>评论人 ： {props.user}</h1>
    <p>评论内容： {props.content}</p>
</div>
}


//使用class关键字定义父组件
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>这是评论列表</h1>

            {this.state.CommentList.map(item =><CmtItem {...item} key={item.id}></CmtItem> )}
        </div>
    }
}


//3. 调用render函数渲染
ReactDOM.render(<div> 
   123
   <CmtList></CmtList>
</div>, document.getElementById('app'))

3. 将评论列表和评论项抽离为单独的组件

index.js

import React from 'react'
import ReactDOM from 'react-dom'

import CmtList from './components/CmtList'


//3. 调用render函数渲染
ReactDOM.render(<div> 
   123
   <CmtList></CmtList>
</div>, document.getElementById('app'))

 

CmtItem.jsx

import React from 'react'
//import ReactDOM from 'react-dom'
//使用class关键字定义父组件
//导入 评论项 字组件
import CmtItem from './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>这是评论列表</h1>

            {this.state.CommentList.map(item =><CmtItem {...item} key={item.id}></CmtItem> )}
        </div>
    }
}

CmtItem.jsx 

import React from 'react'
import ReactDOM from 'react-dom'

//使用function定义自组件,因为其中的每一项都是通过item拿到的
export default function CmtItem(props){
    return <div>
    <h1>评论人 ： {props.user}</h1>
    <p>评论内容： {props.content}</p>
</div>
}