React实现评论功能

知识点

基本渲染

属性传值

父子传值

状态管理

props和state的理解

源码

Comment.js
'use strict';

import React from 'react';

class Comment extends React.Component {
    render() {
 
        return (
            <div className="comment">
                <div className="content">
                    <div className="author">
                        {this.props.author}
                    </div>
                    <div className="metadata">
                        <span className="date">
                            {this.props.date}
                        </span>
                    </div>
                    <div className="text">
                        {this.props.children}
                    </div>
                </div>
            </div>
        )
    }
}

export { Comment as default};

　CommentBox.js

'use strict';
import React from 'react';
import CommentList from './CommentList';
import CommentForm from './CommentForm';


class CommentBox extends React.Component {
    render() {
        return (
            <div className="ui comments">
                <h1>评论</h1>
                <div className="ui divider">

                </div>
                <CommentList data={this.props.data} />
                <CommentForm />
            </div>
        );
    }
}

export { CommentBox as default };

CommentForm.js

'use strict';

import React from 'react';

class CommentForm extends  React.Component {
    render() {
       return (

           <form className="ui reply form">
               <div className="field">
                   <input type="text" placeholder="姓名"/>
               </div>

               <div className="field">
                  <textarea placeholder="评论"></textarea>
               </div>

               <button type="submit" className="ui blue button">
                    添加评论
               </button>
           </form>
       )
    }
}

export {CommentForm as default};

CommentList.js

'use strict';

import React from 'react';
import Comment from './Comment';

class CommentList extends React.Component {
    render() {
        let commentNodes = this.props.data.map(comment => {
            return (<Comment key={comment.author} author={comment.author} date={comment.date}>{comment.text}</Comment>)
        });
        return (<div>
            {commentNodes}
            <Comment author="刘宁" date="10分钟前">太好了</Comment>
            <Comment author="小美" date="10分钟前">太好了</Comment>
            <Comment author="小熙" date="10分钟前">太好了ok</Comment>
        </div>);
    }
}

export { CommentList as default };

main.js

'use strict';
import 'semantic-ui/semantic.min.css!';
import React from 'react';
import ReactDOM from 'react-dom';
import CommentBox from './comment/CommentBox';

var comments = [
    {"author":"飒飒","date":"5分钟前","text":"出去玩啊!"},
    {"author":"冰冰","date":"5分钟前","text":"没时间!"},
];

ReactDOM.render(
    <CommentBox data={comments}/>,
    document.getElementById("app")
);

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div class="ui container" style="padding: 30px;">
        <!-- button.ui.green.button -->
        <!-- <button class="ui green button">Hello</button> -->

        <div id="app"></div>

    </div>

</body>
<!-- 导入system.js-->
<script src="jspm_packages/system.js"></script>
<!-- 导入config.js-->
<script src="config.js"></script>
<script>
    System.import('./app/main');
</script>
</body>

</html>

允许效果

 

 请求服务器

通过请求接口访问数据

执行命令：jspm install jquery

comments.json

[
    {"author":"飒飒","date":"5分钟前","text":"出去玩啊!"},
    {"author":"冰冰","date":"5分钟前","text":"没时间!"}
]　　

 main.js

'use strict';
import 'semantic-ui/semantic.min.css!';
import React from 'react';
import ReactDOM from 'react-dom';
import CommentBox from './comment/CommentBox';



ReactDOM.render(
    <CommentBox  url="app/comments.json" />,
    document.getElementById("app")
);

CommentBox.js

'use strict';
import React from 'react';
import CommentList from './CommentList';
import CommentForm from './CommentForm';
import $ from 'jquery';


class CommentBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = { data: [] };
        this.getComments();
        // 每隔5秒改变状态
        // setInterval(() => this.getComments(), 5000);
    }
    // 子传递给父
    handleCommentSubmit(comment) {
        let comments = this.state.data,
            newComments = comments.concat(comment);
        this.setState({ data: newComments });
    }
    getComments() {
        $.ajax({
            url: this.props.url,
            dataType: 'json',
            cache: false,
            success: comments => {
                this.setState({ data: comments });
            },
            error: (xhr, status, error) => {
                console.log(error);
            }
        });
    }
    render() {
        return (
            <div className="ui comments">
                <h1>评论</h1>
                <div className="ui divider">

                </div>
                <CommentList data={this.state.data} />
                <CommentForm onCommentSubmit={this.handleCommentSubmit.bind(this)} />
            </div>
        );
    }
}

export { CommentBox as default };

CommentForm.js

'use strict';

import React from 'react';

class CommentForm extends  React.Component {
    handleSubmit(event) {
        event.preventDefault();
        
        let author = this.refs.author.value,
            text = this.refs.text.value;
      
        // 子传递给父节点
        this.props.onCommentSubmit({author,text,date:'刚才'});
    }
    render() {
       return (

           <form className="ui reply form" onSubmit={this.handleSubmit.bind(this)}>
               <div className="field">
                   <input type="text" placeholder="姓名" ref="author"/>
               </div>

               <div className="field">
                  <textarea placeholder="评论" ref="text"></textarea>
               </div>

               <button type="submit" className="ui blue button">
                    添加评论
               </button>
           </form>
       )
    }
}

export {CommentForm as default};

　　

　

　　

　

 

posted @ 2020-02-24 13:40  bradleydan  阅读(1137)  评论(0)    收藏  举报