当前位置：首页 > Web前端 > vue.js

js—react评论页

时间：2023-03-31 18:44:35 vue.js

1.分页组件可以拆分成4个组件。组件文件的后缀可以是js或者jsx格式。入口文件index.jsimportReactfrom'react';importReactDOMfrom'react-dom';importAppfrom'./components/app/app';ReactDOM.render(,document.getElementById('root'))应用组件app.jsimportReactfrom'react'importCommentAddfrom'../comment-add/comment-add'importCommentListfrom'../comment-list/comment-list'classAppextendsReact.Component{constructor(props){super(props)this.state={comments:[]}function(){//外汇代理http://www.kaifx.cn/ib/this.delete=this.delete.bind(this)}componentDidMount(){//模拟异步获取数据setTimeout(()=>{constcomments=[{username:"Tom",content:"ReactJS好难！",id:Date.now()},{username:"JACK",content:"ReactJSisnotbad!",id:Date.now()+1}]this.setState({comments:comments})},1000)}//使用箭头函数不需要bind绑定组件的thisadd=(comment)=>{letcomments=this.state.commentscomments.unshift(comment)this.setState({comments})}delete（索引）{让评论=this.state.commentscomments.splice(index,1)this.setState({comments})}render(){return(

请发表对React的评论

)}}exportdefaultApp添加评论表单元comment-add.jsximportReactfrom'react'importPropTypesfrom'prop-types'classCommentAddextendsReact.Component{constructor(props){super(props)this.state={username:'',content:''}this.addComment=this.addComment.bind(this)this.changeUsername=this.changeUsername.bind(this)this.changeContent=this.changeContent.bind(this)}addComment(){//根据输入数据创建评论对象let{username,content}=this.stateletcomment={username,content}//添加到评论，更新状态this.props.add(comment)//清空输入数据this.setState({username:'',content:''})}changeUsername(event){this.setState({username:event.target.value})}changeContent(event){this.setState({content:event.target.value})}render(){return(

用户名

评论内容

提交)}}CommentAdd.propTypes={add:PropTypes.func.isRequired}exportdefaultCommentAdd评论列表组件comment-list。jsximportReactfrom'react'importPropTypesfrom'prop-types'importCommentItemfrom'../comment-item/comment-item'import'./commentList.css'classCommentListextendsReact.Component{构造函数（props）{super(props)}render(){letcomments=this.props.commentsletdisplay=comments.length>0?'none':'block'return(回复评论：No评论还没，点击左边添加评论！！！{comments.map((comment,index)=>{console.log(comment)return})})}}CommentList.propTypes={comments:PropTypes.array.isRequired,delete:PropTypes.func.isRequired}exportdefaultCommentList评论列表的项目组comment-item.jsximportReactfrom'react'importPropTypesfrom'prop-types'import'./commentItem.css'classCommentItemextendsReact.Component{constructor(props){super(props)this.deleteComment=this.deleteComment.bind(this)}deleteComment(){letusername=this.props.comment.usernameif(window.confirm(`确定删除${username}的评论吗?`)){this.props.delete(this.props.index)}}render(){letcomment=this.props.commentreturn(删除{评论.用户名}说：

{comment.content}

)}}CommentItem.propTypes={comment:PropTypes.object.isRequired,index:PropTypes.number.isRequired,delete:PropTypes.func.isRequired}exportdefaultCommentItem如果没有需要安装的prop-types，一般react脚手架都是默认安装的npminstall--saveprop-types

上一篇：【壮壮踩坑笔记2】

下一篇：JS限制输入框输入字符长度，中文算2个字符，英文算1个字符，总字符长度不超过N

js—react评论页相关文章

最新推荐

猜你喜欢