21_评论管理_初始化数据动态显示

项目结构：

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

 

import React from 'react'
import CommentAdd from '../comment-add/comment-add'
import CommentList from '../comment-list/comment-list'

export default class App extends React.Component {
    // 第一种初始化数据对象方法
    /*    constructor(props) {
            super(props)
            this.state = {
                comments: [
                    {username: 'Tom', content: 'react挺好的！'},
                    {username: 'Jack', content: 'react有点难！'}
                ]
            }
        }*/

    //第二种初始化数据对象方法,给对象指定state属性
    state = {
        comments: [
            {username: 'Tom', content: 'react挺好的！'},
            {username: 'Jack', content: 'react有点难！'}
        ]
    }

    render() {
        const {comments} = this.state
        return (
            <div>
                <div>
                    <header className="site-header jumbotron">
                        <div className="container">
                            <div className="row">
                                <div className="col-xs-12">
                                    <h1>请发表对React的评论</h1>
                                </div>
                            </div>
                        </div>
                    </header>
                    <div className="container">
                        <CommentAdd/>
                        <CommentList comments={comments}/>
                    </div>
                </div>

            </div>
        )
    }
}

app.jsx

import React, {Component} from 'react'

export default class CommentAdd extends Component {
    render() {
        return (
            <div className="col-md-4">
                <form className="form-horizontal">
                    <div className="form-group">
                        <label>用户名</label>
                        <input type="text" className="form-control" placeholder="用户名"/>
                    </div>
                    <div className="form-group">
                        <label>评论内容</label>
                        <textarea className="form-control" rows="6" placeholder="评论内容"></textarea>
                    </div>
                    <div className="form-group">
                        <div className="col-sm-offset-2 col-sm-10">
                            <button type="button" className="btn btn-default pull-right">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        )
    }
}

comment-add.jsx

import React, {Component} from 'react';
import PropTypes from 'prop-types'
import './commentItem.css'

export default class CommentItem extends Component {
    static propTypes = {
        comment: PropTypes.object.isRequired
    }

    render() {
        const {comment} = this.props
        return (
            <li className="list-group-item">
                <div className="handle">
                    <a href="javascript:;">删除</a>
                </div>
                <p className="user"><span>{comment.username}</span><span>说:</span></p>
                <p className="centence">{comment.content}</p>
            </li>
        );
    }
}

comment-item.jsx

li {
    transition: .5s;
    overflow: hidden;
}

.handle {
    width: 40px;
    border: 1px solid #ccc;
    background: #fff;
    position: absolute;
    right: 10px;
    top: 1px;
    text-align: center;
}

.handle a {
    display: block;
    text-decoration: none;
}

.list-group-item .centence {
    padding: 0px 50px;
}

.user {
    font-size: 22px;
}

comment-item.css

import React, {Component} from 'react'
import PropTypes from 'prop-types'
import CommentItem from '../comment-item/comment-item'
import './commentList.css'

export default class CommentList extends Component {
    //指定组件类型.


    render() {
        const {comments} = this.props
        return (
            <div className="col-md-8">
                <h3 className="reply">评论回复：</h3>
                <h2 style={{display: 'none'}}>暂无评论，点击左侧添加评论！！！</h2>
                <ul className="list-group">
                    {
                        comments.map((c, index) => <CommentItem comment={c} key={index}/>)
                    }
                </ul>
            </div>
        )
    }
}
//这种属性方式有点麻烦
/*
CommentList.propTypes = {
    comments: PropTypes.array.isRequired
}*/

comment-list.jsx

.reply {
    margin-top: 0px;
}

commentList.css

note：

　　初始化数据对象有两种方法，

　　　　1.构造器内初始化(不推荐)

　　　　2.直接在类中最上方初始化(推荐)

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄