阅读:2849回复:0
React初学,制作一个简单的留言板demo
首先先简单认识一下React,它是目前前端三大主流框架之一,其次还有Vue、Angular。
React 是一个用于构建用户界面的 JavaScript 库 特点: 1.声明式设计 −React采用声明范式,可以轻松描述应用。 2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。 3.灵活 −React可以与已知的库或框架很好地配合。 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。 JSX:总的来说是可以把HTML直接写JS里 5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。 6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。 核心:组件 精髓:函数式编程 安装react脚手架: npm install create-react-app -g 创建:create-reacr-app 项目名 启动:npm star ============================================ 接下来是demo 下载完react脚手架后会生成相对的项目结构 图片:项目结构.png 在此基础上新建一个文件夹,方便管理和编写 图片:文件夹.png 首先创建四个js文件夹,分别为Comment.js、CommentBox.js、CommentForm.js、CommentList.js 首先在index.js下, import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import CommentBox from './comments/CommentBox'; import * as serviceWorker from './serviceWorker'; let commitlist=[ {name:'王',date:'2020-10-10',content:'哈哈哈'}, {name:'吴',date:'2020-10-11',content:'嘿嘿嘿'}, {name:'陈',date:'2020-10-12',content:'嘻嘻嘻'} ] ReactDOM.render( <React.StrictMode> <CommentBox data={commitlist}/> </React.StrictMode>, document.getElementById('root') );然后是CommentBox.js import React, {Component} from 'react'; //导入react import CommentList from './CommentList'; import CommentForm from './CommentForm'; import './css/CommentBox.css' //xxx 组件名 class CommentBox extends React.Component { //获取index.js传过来的值 constructor(props){ super(props); this.state = { data : this.props.data, editToggle:Array(this.props.data.length).fill(false) } }; //表单提交 handleCommentSubmit(comment){ this.setState({ data:this.state.data.concat([comment]) }) } //删除函数 handleCommentDelete(index){ const data = this.state.data.slice(0), editToggle = this.state.editToggle.slice(0); console.log(data); console.log(editToggle); data.splice(index,1); editToggle.splice(index,1); this.setState({ data:data, editToggle:editToggle }) } // //渲染 render() { return ( <div className='CommentBox'> <CommentList {...this.state} handleCommentDelete = {(index)=>this.handleCommentDelete(index)} /> <CommentForm handleCommentSubmit={(comment)=> this.handleCommentSubmit(comment)}/> </div> ) } } export {CommentBox as default}将方法定义在最大的组件内然后再依次传递到子组件内 然后是CommentList.js import React,{Component} from 'react'; //导入react import Comment from './Comment'; import './css/CommentList.css' //xxx 组件名 function CommentList (props){ //渲染 console.log(props.data) let CommentList = props.data.map((item,index)=>{ let {name,date,content}=item; item.index = index return <Comment key={index} name={name} date={date} editToggle={props.editToggle[index]} handleCommentDelete={() => props.handleCommentDelete(index)}> {content} </Comment> }); return ( <div className="CommentList"> {CommentList} </div> ) } export default CommentList;然后是CommentForm.js import React, {Component} from 'react'; //导入react import './css/CommentForm.css'; //导入react //xxx 组件名 class CommentForm extends React.Component { handleSubmit(e){ e.preventDefault(); let content = this.refs.content.value, name = this.refs.name.value, date = new Date().toLocaleString(), waring = this.refs.waring; if (!name){ waring.innerHTML = "姓名不能为空"; return null }else if (!content){ waring.innerHTML = "评论不能为空"; return null }else { waring.innerHTML = " "; } this.props.handleCommentSubmit({name,date,content}) } //渲染 render() { return ( <form className="CommentForm" onSubmit={(e)=>this.handleSubmit(e)}> <p className='waring' ref='waring'></p> <p><input type="text" placeholder='姓名' ref='name' className='sname'/></p> <p> <textarea name="" id="" cols="33" rows="5" placeholder='请输入...' ref='content'></textarea> </p> <p className='btn'> <button>发送</button> </p> </form> ) } } export { CommentForm as default }最后是Comment.js import React,{Component} from 'react'; //导入react import './css/Comment.css'; //导入react //xxx 组件名 class Comment extends React.Component { //渲染 render() { return ( <div className='Comment'> <p> <span>{this.props.name}</span> <span>{this.props.date}</span> <span onClick={this.props.handleCommentDelete} className='deletebtn'>删除</span> </p> <p>{this.props.children}</p> </div> ) } } export { Comment as default } 效果图 图片:QQ图片20200627221743.png 输入 图片:QQ图片20200627221858.png 点击发送 图片:QQ图片20200627221909.png |
|