react 实现评论管理页面

一、把页面拆分组件

可以拆分为4个组件，组件文件的后缀名可以是js，也可以是jsx格式。

二、主要代码

项目结构

入口文件 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app/app';


ReactDOM.render(<App/>, document.getElementById('root'))

应用组件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: []
    }

    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 = th