一、把页面拆分组件
可以拆分为4个组件，组件文件的后缀名可以是js，也可以是jsx格式。
入口文件 index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app/app';
ReactDOM.render(
应用组件app.js
import React from 'react'
import CommentAdd from '../comment-add/comment-add'
import CommentList from '../comment-list/comment-list'
class App extends React.Component {
constructor (props) {
super(props)
this.state = {
comments: []
}
function(){ //外汇代理 http://www.kaifx.cn/ib/
this.delete = this.delete.bind(this)}
componentDidMount () {
//模拟异步获取数据
setTimeout(() => {
const comments = [
{
username: "Tom",
content: "ReactJS好难啊!",
id: Date.now()
},
{
username: "JACK",
content: "ReactJS还不错!",
id: Date.now() + 1
}
]
this.setState({
comments:comments
})
}, 1000)}
//用箭头函数就不需要bind绑定组件的this
add = (comment) => {
let comments = this.state.comments
comments.unshift(comment)
this.setState({ comments })}
delete (index) {
let comments = this.state.comments
comments.splice(index, 1)
this.setState({ comments })}
render () {
return (
请发表对React的评论
)}
}
export default App
添加评论表单组件comment-add.jsx
import React from 'react'
import PropTypes from 'prop-types'
class CommentAdd extends React.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.state
let comment = { username, content }
// 添加到comments中, 更新state
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
}
export default CommentAdd
评论列表组件comment-list.jsx
import React from 'react'
import PropTypes from 'prop-types'
import CommentItem from '../comment-item/comment-item'
import './commentList.css'
class CommentList extends React.Component {
constructor (props) {
super(props)}
render () {
let comments = this.props.comments
let display = comments.length > 0 ? 'none' : 'block'
return (
评论回复：
暂无评论，点击左侧添加评论！！！
{
comments.map((comment, index) => {
console.log(comment)
return
})
}
)}
}
CommentList.propTypes = {
comments: PropTypes.array.isRequired,
delete: PropTypes.func.isRequired
}
export default CommentList
评论列表的item组件comment-item.jsx
import React from 'react'
import PropTypes from 'prop-types'
import './commentItem.css'
class CommentItem extends React.Component {
constructor (props) {
super(props)
this.deleteComment = this.deleteComment.bind(this)}
deleteComment () {
let username = this.props.comment.username
if (window.confirm(`确定删除${username}的评论吗?`)) {
this.props.delete(this.props.index)
}}
render () {
let comment = this.props.comment
return (
{comment.username}说:
{comment.content}
)}
}
CommentItem.propTypes = {
comment: PropTypes.object.isRequired,
index: PropTypes.number.isRequired,
delete: PropTypes.func.isRequired
}
export default CommentItem
如果没有prop-types 需要安装，一般react脚手架默认就安装了。
npm install --save prop-types