React基础学习-评论区总结

最新推荐文章于 2024-03-24 11:50:03 发布

yuri_on_ice

最新推荐文章于 2024-03-24 11:50:03 发布

阅读量480

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/yuri_on_ice/article/details/81663954

版权

React 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、项目环境搭建

先下载安装node.js

打开webstorm，File->Settings->Languages & Frameworks->node.js and NPM

然后打开webstorm左下角的终端Terminal输入命令：npm install -g create-react-app

安装完毕后，File->Project...->React App

二、安装项目所需工具包（框架等）

*可以在这些框架官方网站上找到安装命令

三、文件结构

node_modules文件夹：放置项目依赖包

public文件夹：放置项目入口文件

src文件夹：放置开发组件

package.json文件：打开看可以发现是项目相关信息

manifest.json文件：项目配置文件

registerServiceWorker.js文件：查找资料后了解到，service worker是在后台运行的一个线程，可以用来处理离线缓存、消息推送、后台自动更新等任务，registerServiceWorker.js则可以为react项目注册了一个service worker，用来做资源的缓存，这样你下次访问时，就可以更快的获取资源。而且因为资源被缓存，所以即使在离线的情况下也可以访问应用（此时使用的资源是之前缓存的资源）。但是registerServiceWorker注册的service worker 只在生产环境中生效（process.env.NODE_ENV === 'production'）。

四、评论区组件开发

评论区效果图

index.html:

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
  <!--
    This HTML file is a template.
    If you open it directly in the browser, you will see an empty page.

    You can add webfonts, meta tags, or analytics to this file.
    The build step will place the bundled scripts into the <body> tag.

    To begin the development, run `npm start` or `yarn start`.
    To create a production bundle, use `npm run build` or `yarn build`.
  -->
</body>

分析得到组件组成可以看出：Comment（单条评论）、CommentList（评论列表：包含多条评论）、CommentForm（评论表单）、CommentBox（评论区：包含评论列表、评论表单），代码如下：

Comment.js

import React from 'react';

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

export {Comment as default};

CommentList.js

import React,{Component} from 'react';
import Comment from './Comment';

class CommentList extends Component {
    render(){
        let commentsNodes = this.props.data.map(comment => {
            return (
                <Comment author={comment.author} date={comment.date}>{comment.text}</Comment>
            );
        });
        return (
            <div>
                {commentsNodes}
            </div>
        );
    }
}

export { CommentList as default };

CommentForm.js

import React from 'react';

class CommentForm extends React.Component{
    handleSubmit(event){
        event.preventDefault();
        console.log('提交表单中...');
        let author = this.refs.author.value;
        let toComment = this.refs.toComment.value;
        console.log(author,toComment);
        this.props.onCommentSubmit({author,date:"刚刚",text:toComment});
    }

    render(){
        return (
            <form className="layui-form" onSubmit={this.handleSubmit.bind(this)}>
                <div className="layui-form-item">
                        <input type="text" name="title" required  lay-verify="required" placeholder="昵称" autocomplete="off" className="layui-input" ref="author"/>
                </div>
                <div className="layui-form-item layui-form-text">
                        <textarea name="desc" placeholder="评论" className="layui-textarea" ref="toComment"></textarea>
                </div>
                <div className="layui-form-item">
                        <button className="layui-btn" lay-submit lay-filter="formDemo">添加评论</button>
                </div>
            </form>
        );
    }
}

export { CommentForm as default };

CommentBox.js

import React,{Component} from 'react';
import 'layui-src/src/css/layui.css';
import CommentList from './CommentList';
import CommentForm from './CommentForm';
import $ from 'jquery';

class CommentBox extends Component {
    constructor(props){
        super(props);
        this.state={data:[]};
        // setInterval(() => this.getComments(),5000);
        this.getComments();
    }

    handleCommentSubmit(comment){
        console.log(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="layui-container">
                <h1>评论</h1>
                <hr className="layui-bg-gray"></hr>
                <CommentList data={this.state.data}/>
                <hr className="layui-bg-gray"></hr>
                <CommentForm onCommentSubmit={this.handleCommentSubmit.bind(this)}/>
            </div>
        );
    }
}

export { CommentBox as default };

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import CommentBox from './component/CommentBox';

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

*url指的是文件位置，与index.html在同一文件夹下：

五、运行效果

点击添加评论按钮->

yuri_on_ice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React基础学习-评论区总结

一、项目环境搭建先下载安装node.js打开webstorm，File-&gt;Settings-&gt;Languages &amp; Frameworks-&gt;node.js and NPM然后打开webstorm左下角的终端Terminal输入命令：npm install -g create-react-app安装完毕后，File-&gt;Project...-&...
复制链接

扫一扫