import?React?from?'react';import?logo?from?'./logo.svg';import?'./App.css';import?CommentList?from?'./CommentList'import?CommentBox?from?'./CommentBox'class?App?extends?React.Component{??constructor(props){??????super(props)??????this.state={????????comments:["hahahahahahahah","13"]??????}??????this.addComment=this.addComment.bind(this)??????this.deleteComment=this.deleteComment.bind(this)??}??addComment(comment){????this.setState({??????comments:[...this.state.comments,comment]????});??}??deleteComment(index){????let?newComments=this.state.comments;????newComments.splice(index,1);????console.log(newComments);????this.setState=({??????comments:newComments????});????console.log(this.state.comments)??}??????render(){????????const?{comments}?=this.state??return?(????<div?className="App">??????<header?className="App-header">????????<img?src={logo}?className="App-logo"?alt="logo"?/>????????<p>??????????Edit?<code>src/App.js</code>?and?save?to?reload.????????</p>????????<a??????????className="App-link"??????????????????>??????????Learn?React????????</a>??????</header>??????<CommentList?comments={comments}?deleteComment={this.deleteComment}/>??????<CommentBox?Componentlenth=?{comments.length}??onAddComment={this.addComment}/>????</div>??);??????}}export?default?App;

import?React?from?'react'class?CommentList?extends?React.Component{???deleteCommenta(index){????this.props.deleteComment(index)????}render(){????const?{comments}=this.props????????return(????????<div>????????????<label>評論列表</label>????????????<ul>????????????????{comments.map((comment,index)=><li?key={index}>{comment}????????????????<button??type="button"?onClick={()=>this.deleteCommenta(index)}>刪除</button>????????????????</li>)}????????????</ul>????????</div>????)}}export?default?CommentList;