React学习笔记3:用es2015(ES6)重写CommentBox

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了React学习笔记3:用es2015(ES6)重写CommentBox脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

新搭建的个人博客,本文地址:React学习笔记3:用es2015(ES6)重写CommentBox
在一开始的时候webpack配置中我们就加入了es2015的支持,就是下面的配置,但之前的学习笔记都使用的es5完成,所以专门作一篇笔记,记录使用es6完成CommentBox

@H_512_14@query: {
  PResets: ['es2015','react']
}

1、创建相关文件

touch src/commentEs6.js
//修改webpack,增加该入口文件
  entry:{
    'index':'./src/index.js',
    'comment':'./src/comment.js',
    'commentEs6':'./src/commentEs6.js',
  },
//修改build/index.html,引入该文件
  <script src="commentEs6.js"></script>

2、做个简单的测试,看下浏览器

//require全部用import来完成
import React from 'react';
import ReactDom from 'react-dom';
//es6支持类,通过类继承完成组件的开发
class CommentBox extends React.Component {
    render () {
        return <div>Hello World</div>
    }
}

//渲染
ReactDom.render(
    <CommentBox />,document.getElementById('content')
)

3、直接贴出完整修改后的代码

import React from 'react';
import ReactDom from 'react-dom';
import marked from 'marked'
import $ from 'jquery'

class CommentBox extends React.Component {
    constructor(props){
        super(props)
        //state 初始化直接在构造函数完成
        this.state = {data:[]}
    }
    //函数的书写方式也发生了变化
    loadCommentsFromServer(){
        //还不太明白,总之this到了ajax中指向的对象就发生了变化
        var url = this.props.url
        $.ajax({
            url:url,
            dataType:"json",
            cache:false,
            //利用箭头函数传参,可以少去了bind this
            success:(data) => {
                this.setState({data: data})
            },
            error:(xhr,status,err) => {
                console.log(url,status,err.toString())
            }
        })
    }
    handleSubmitComment(data){
        var url = this.props.url
        $.ajax({
            url:url,
            type:"POST",
            data:data,
            dataType:"json",
            cache:false,
            success:(data) => {
                this.setState({data:this.state.data.concat(data)});
            },
            error:(xhr,status,err) => {
                console.log(this.props.url,status,err.toString())
            }
        })
    }
    componentDidMount(){
        this.loadCommentsFromServer()
        //setTimeout(this.loadCommentsFromServer,2000)
    }

    render() {
        return (
            <div classname='commentBox'>
                <h1>Comments</h1>
                <CommentList data={this.state.data} />
                <CommentForm onSubmitComment={this.handleSubmitComment.bind(this)} />
            </div>
        )
    }
}


class CommentList extends React.Component{
    constructor(props) {
        super(props)
    }

    render(){
        var commentNodes = this.props.data.map(function(comment){
            return (
                <Comment author={comment.author} key={comment.id}>
                    {comment.text}
                </Comment>
            )
        });
        return (
            <div className='commentList'>
                {commentNodes}
            </div>
        )
    }
}

class Comment extends React.Component {
    constructor(props) {
        super(props)
    }
    rawMarkup(){
        var rawMarkup = marked(this.props.children.toString(),{sanitize:true})
        return {__html:rawMarkup}
    }
    render(){
        return (
            <div className='comment'>
                <h2 className='commentAuthor'>
                    {this.props.author}
                </h2>
                <span dangerouslySetInnerHTML={this.rawMarkup()} />
            </div>

        )
    }
}

class CommentForm extends React.Component{
    constructor(props) {
        super(props)
        this.state = {author:"",text:""}
    }
    handleAuthorChange(event){
        this.setState({author:event.target.value})
    }
    handleTextChange(event){
        this.setState({text:event.target.value})
    }
    handleSubmit(event){
        event.preventDefault();
        var author = this.state.author.trim()
        var text = this.state.text.trim()
        if(!text||!author) {
            return;
        }
        this.props.onSubmitComment({author:author,text:text});
        this.setState({author:"",text:""})
        return false;
    }

    render(){
        return (
            <form className='commentForm' onSubmit={this.handleSubmit.bind(this)}>
                <input type='text' onChange={this.handleAuthorChange.bind(this)}
                       placeholder='怎么称呼您呢?爷' value={this.state.author} />
                <input type='text' onChange={this.handleTextChange.bind(this)}
                       placeholder='爷有什么赐教?' value={this.state.text} />
                <input type='submit' value='提交' />
            </form>
        )
    }
}


ReactDom.render(
    <CommentBox url="http://localhost:8080/api/comment" />,document.getElementById('content')
)

脚本宝典总结

以上是脚本宝典为你收集整理的React学习笔记3:用es2015(ES6)重写CommentBox全部内容,希望文章能够帮你解决React学习笔记3:用es2015(ES6)重写CommentBox所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。