本人的React学习笔记分类(也是对应本人技术成长过程):[想快速入门看这部分]、[想对React系统全面进行学习的同学看这里]、[对基础学习完成且有了一定开发经验,想尝试解析源码的看这里]

实战分析：评论功能（一）

课程到这里大家已经掌握了 React.js 的基础知识和组件的基本写法了。现在可以把我们所学到的内容应用于实战当中。这里给大家提供一个实战的案例：一个评论功能。效果如下：

在线演示地址

接下来会带大家一起来学习如何分析、编写这个功能。在这个过程中会补充一些之前没有提及的知识点，虽然这些知识点之前没有单独拿出来讲解，但是这些知识点也很关键。

组件划分

React.js 中一切都是组件，用 React.js 构建的功能其实也就是由各种组件组合而成。所以拿到一个需求以后，我们要做的第一件事情就是理解需求、分析需求、划分这个需求由哪些组件构成。

组件的划分没有特别明确的标准。划分组件的目的性是为了代码可复用性、可维护性。只要某个部分有可能复用到别的地方，你都可以把它抽离出来当成一个组件；或者把某一部分抽离出来对代码的组织和管理会带来帮助，你也可以毫不犹豫地把它抽离出来。

对于上面这个评论功能，可以粗略地划分成以下几部分：

CommentApp：评论功能的整体用一个叫 CommentApp 的组件包含起来。CommentApp 包含上部和下部两部分。

CommentInput：上面部分是负责用户输入可操作的输入区域，包括输入评论的用户名、评论内容和发布按钮，这一部分功能划分到一个单独的组件 CommentInput 中。

CommentList：下面部分是评论列表，用一个叫 CommentList 的组件负责列表的展示。

Comment：每个评论列表项由独立的组件 Comment 负责显示，这个组件被 CommentList 所使用。

所以这个评论功能划分成四种组件，CommentApp、CommentInput、CommentList、Comment。用组件树表示：

现在就可以尝试编写代码了。

组件实现

在写代码之前，我们先用 create-react-app 构建一个新的工程目录。所有的评论功能在这个工程内完成：

create-react-app comment-app

然后在工程目录下的 src/ 目录下新建四个文件，每个文件对应的是上述的四个组件。

src/
  CommentApp.js
  CommentInput.js
  CommentList.js
  Comment.js
  ...

你可以注意到，这里的文件名的开头是大写字母。我们遵循一个原则：如果一个文件导出的是一个类，那么这个文件名就用大写开头。四个组件类文件导出都是类，所以都是大写字母开头。

我们先铺垫一些基础代码，让组件之间的关系清晰起来。遵循“自顶而下，逐步求精”的原则，我们从组件的顶层开始，再一步步往下构建组件树。先修改 CommentApp.js 如下：

import React, { Component } from 'react'
import CommentInput from './CommentInput'
import CommentList from './CommentList'
class CommentApp extends Component {
  render() {
    return (
      <div>
        <CommentInput />
        <CommentList />
      </div>
    )
  }
}
export default CommentApp

CommentApp 现在暂时还很简单，文件顶部引入了 CommentInput 和 CommentList 。然后按照上面的需求，应用在了 CommentApp 返回的 JSX 结构中，上面是用户输入区域，下面是评论列表。

现在来修改 CommentInput.js 中的内容：

import React, { Component } from 'react'
class CommentInput extends Component {
  render() {
    return (
      <div>CommentInput</div>
    )
  }
}
export default CommentInput

这里暂时让它只简单返回 <div> 结构，同样地修改 CommentList.js ：

import React, { Component } from 'react'
class CommentList extends Component {
  render() {
    return (
      <div>CommentList</div>
    )
  }
}
export default CommentList

现在可以把这个简单的结构渲染到页面上看看什么效果，修改 src/index.js：

import React from 'react'
import ReactDOM from 'react-dom'
import CommentApp from './CommentApp'
import './index.css'
ReactDOM.render(
  <CommentApp />,
  document.getElementById('root')
)

然后进入工程目录启动工程：

npm run start

在浏览器中可以看到，基本的结构已经渲染到了页面上了：

添加样式

现在想让这个结构在浏览器中居中显示，我们就要给 CommentApp 里面的 <div> 添加样式。修改 CommentApp 中的render 方法，给它添加一个 wrapper 类名：

...
class CommentApp extends Component {
  render() {
    return (
      <div className='wrapper'>
        <CommentInput />
        <CommentList />
      </div>
    )
  }
}
...

然后在 index.css 文件中添加样式：

.wrapper {
  width: 500px;
  margin: 10px auto;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #f1f1f1;
  padding: 20px;
}

在浏览器中可以看到样式生效了：

评论功能案例的所有样式都是通过这种方式进行添加。由于我们专注点在于 React.js，本案例后续不会在样式上过于纠缠。这里写好了一个样式文件（index.css ）提供给大家，可以复制到 index.css 当中。后续只需要在元素上加上类名就可以了。

index.css

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-color: #fbfbfb;
  }
  .wrapper {
    width: 500px;
    margin: 10px auto;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #f1f1f1;
    padding: 20px;
  }
  /* 评论框样式 */
  .comment-input {
    background-color: #fff;
    border: 1px solid #f1f1f1;
    padding: 20px;
    margin-bottom: 10px;
  }
  .comment-field {
    margin-bottom: 15px;
    display: flex;
  }
  .comment-field .comment-field-name {
    display: flex;
    flex-basis: 100px;
    font-size: 14px;
  }
  .comment-field .comment-field-input {
    display: flex;
    flex: 1;
  }
  .comment-field-input input,
  .comment-field-input textarea {
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    padding: 5px;
    outline: none;
    font-size: 14px;
    resize: none;
    flex: 1;
  }
  .comment-field-input textarea {
    height: 100px;
  }
  .comment-field-button {
    display: flex;
    justify-content: flex-end;
  }
  .comment-field-button button {
    padding: 5px 10px;
    width: 80px;
    border: none;
    border-radius: 3px;
    background-color: #00a3cf;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
  .comment-field-button button:active {
    background: #13c1f1;
  }
  /* 评论列表样式 */
  .comment-list {
    background-color: #fff;
    border: 1px solid #f1f1f1;
    padding: 20px;
  }
  /* 评论组件样式 */
  .comment {
    position: relative;
    display: flex;
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 10px;
    padding-bottom: 10px;
    min-height: 50px;
  }
  .comment .comment-user {
    flex-shrink: 0;
  }
  .comment-username {
    color: #00a3cf;
    font-style: italic;
  }
  .comment-createdtime {
    padding-right: 5px;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 5px;
    font-size: 12px;
  }
  .comment:hover .comment-delete {
    color: #00a3cf;
  }
  .comment-delete {
    position: absolute;
    right: 0;
    top: 0;
    color: transparent;
    font-size: 12px;
    cursor: pointer;
  }
  .comment p {
    margin: 0;
    /*text-indent: 2em;*/
  }
  code {
    border: 1px solid #ccc;
    background: #f9f9f9;
    padding: 0px 2px;
  }

实战分析：评论功能（二）

处理用户输入

我们从 ComponentInput 组件开始，学习 React.js 是如何处理用户输入的。首先修改 ComponentInput.js，完善 ComponentInput 的 render 函数中的 HTML 结构：

import React, { Component } from 'react'
class CommentInput extends Component {
  render () {
    return (
      <div className='comment-input'>
        <div className='comment-field'>
          <span className='comment-field-name'>用户名：</span>
          <div className='comment-field-input'>
            <input />
          </div>
        </div>
        <div className='comment-field'>
          <span className='comment-field-name'>评论内容：</span>
          <div className='comment-field-input'>
            <textarea />
          </div>
        </div>
        <div className='comment-field-button'>
          <button>
            发布
          </button>
        </div>
      </div>
    )
  }
}
export default CommentInput

在浏览器中可以看到 ComponentInput 的结构和样式都已经生效：

因为还没有加入处理逻辑，所以你输入内容，然后点击发布是不会有什么效果的。用户可输入内容一个是用户名（username），一个是评论内容（content），我们在组件的构造函数中初始化一个 state 来保存这两个状态：

...
class CommentInput extends Component {
  constructor () {
    super()
    this.state = {
      username: '',
      content: ''
    }
  }
  ...
}
...

然后给输入框设置 value 属性，让它们的 value 值等于 this.state 里面相应的值：

...
        <div className='comment-field'>
          <span className='comment-field-name'>用户名：</span>
          <div className='comment-field-input'>
            <input value={this.state.username} />
          </div>
        </div>
        <div className='comment-field'>
          <span className='comment-field-name'>评论内容：</span>
          <div className='comment-field-input'>
            <textarea value={this.state.content} />
          </div>
        </div>
...

可以看到接受用户名输入的 <input /> 和接受用户评论内容的 <textarea /> 的 value 值分别由 state.username 和 state.content 控制。这时候你到浏览器里面去输入内容看看，你会发现你什么都输入不了。

这是为什么呢？React.js 认为所有的状态都应该由 React.js 的 state 控制，只要类似于 <input />、<textarea />、<select /> 这样的输入控件被设置了 value 值，那么它们的值永远以被设置的值为准。值不变，value 就不会变化。

例如，上面设置了 <input /> 的 value 为 this.state.username，username 在 constructor 中被初始化为空字符串。即使用户在输入框里面尝试输入内容了，还是没有改变 this.state.username 是空字符串的事实。

所以应该怎么做才能把用户内容输入更新到输入框当中呢？在 React.js 当中必须要用 setState 才能更新组件的内容，所以我们需要做的就是：监听输入框的 onChange 事件，然后获取到用户输入的内容，再通过 setState 的方式更新 state 中的 username，这样 input 的内容才会更新。

...
    <div className='comment-field-input'>
      <input
        value={this.state.username}
        onChange={this.handleUsernameChange.bind(this)} />
    </div>
...

上面的代码给 input 加上了 onChange 事件监听，绑定到 this.handleUsernameChange 方法中，该方法实现如下：

...
  handleUsernameChange (event) {
    this.setState({
      username: event.target.value
    })
  }
...

在这个方法中，我们通过 event.target.value 获取 <input /> 中用户输入的内容，然后通过 setState 把它设置到 state.username 当中，这时候组件的内容就会更新，input 的 value 值就会得到更新并显示到输入框内。这时候输入已经没有问题了：

类似于 <input />、<select />、<textarea> 这些元素的 value 值被 React.js 所控制、渲染的组件，在 React.js 当中被称为受控组件（Controlled Component）。对于用户可输入的控件，一般都可以让它们成为受控组件，这是 React.js 所推崇的做法。另外还有非受控组件，这里暂时不提及。

同样地，让 <textarea /> 成为受控组件：

...
  handleContentChange (event) {
    this.setState({
      content: event.target.value
    })
  }
...
      <div className='comment-field'>
        <span className='comment-field-name'>评论内容：</span>
        <div className='comment-field-input'>
          <textarea
            value={this.state.content}
            onChange={this.handleContentChange.bind(this)} />
        </div>
      </div>
...

向父组件传递数据

当用户在 CommentInput 里面输入完内容以后，点击发布，内容其实是需要显示到 CommentList 组件当中的。但这两个组件明显是单独的、分离的组件。我们再回顾一下之前是怎么划分组件的：

可以看到，CommentApp 组件将 CommentInput 和 CommentList 组合起来，它是它们俩的父组件，可以充当桥接两个子组件的桥梁。所以当用户点击发布按钮的时候，我们就将 CommentInput 的 state 当中最新的评论数据传递给父组件 CommentApp ，然后让父组件把这个数据传递给 CommentList 进行渲染。

CommentInput 如何向 CommentApp 传递的数据？父组件 CommentApp 只需要通过 props 给子组件 CommentInput 传入一个回调函数。当用户点击发布按钮的时候，CommentInput 调用 props 中的回调函数并且将 state 传入该函数即可。

先给发布按钮添加事件：

...
      <div className='comment-field-button'>
        <button
          onClick={this.handleSubmit.bind(this)}>
          发布
        </button>
      </div>
...

用户点击按钮的时候会调用 this.handleSubmit 方法：

...
  handleSubmit () {
    if (this.props.onSubmit) {
      const { username, content } = this.state
      this.props.onSubmit({username, content})
    }
    this.setState({ content: '' })
  }
...

handleSubmit 方法会判断 props 中是否传入了 onSubmit 属性。有的话就调用该函数，并且把用户输入的用户名和评论数据传入该函数。然后再通过 setState 清空用户输入的评论内容（但为了用户体验，保留输入的用户名）。

修改 CommentApp.js ，让它可以通过传入回调来获取到新增评论数据：

class CommentApp extends Component {
  handleSubmitComment (comment) {
    console.log(comment)
  }
  render() {
    return (
      <div className='wrapper'>
        <CommentInput
          onSubmit={this.handleSubmitComment.bind(this)} />
        <CommentList />
      </div>
    )
  }
}

在 CommentApp 中给 CommentInput 传入一个 onSubmit 属性，这个属性值是 CommentApp 自己的一个方法 handleSubmitComment。这样 CommentInput 就可以调用 this.props.onSubmit(…) 把数据传给 CommenApp。

现在在 CommentInput 中输入完评论内容以后点击发布，就可以看到 CommentApp 在控制台打印的数据：

这样就顺利地把数据传递给了父组件，接下来我们开始处理评论列表相关的逻辑。

实战分析：评论功能（三）

接下来的代码比较顺理成章了。修改 CommentList 可以让它可以显示评论列表：

// CommentList.js
import React, { Component } from 'react'
class CommentList extends Component {
  render() {
    const comments = [
      {username: 'Jerry', content: 'Hello'},
      {username: 'Tomy', content: 'World'},
      {username: 'Lucy', content: 'Good'}
    ]
    return (
      <div>{comments.map((comment, i) => {
        return (
          <div key={i}>
            {comment.username}：{comment.content}
          </div>
        )
      })}</div>
    )
  }
}
export default CommentList

这里的代码没有什么新鲜的内容，只不过是建立了一个 comments 的数组来存放一些测试数据的内容，方便我们后续测试。然后把 comments 的数据渲染到页面上，这跟我们之前讲解的章节的内容一样——使用 map 构建一个存放 JSX 的数组。就可以在浏览器看到效果：

修改 Comment.js 让它来负责具体每条评论内容的渲染：

import React, { Component } from 'react'
class Comment extends Component {
  render () {
    return (
      <div className='comment'>
        <div className='comment-user'>
          <span>{this.props.comment.username} </span>：
        </div>
        <p>{this.props.comment.content}</p>
      </div>
    )
  }
}
export default Comment

这个组件可能是我们案例里面最简单的组件了，它只负责每条评论的具体显示。你只需要给它的 props 中传入一个 comment 对象，它就会把该对象中的 username 和 content 渲染到页面上。

马上把 Comment 应用到 CommentList 当中，修改 CommentList.js 代码：

import React, { Component } from 'react'
import Comment from './Comment'
class CommentList extends Component {
  render() {
    const comments = [
      {username: 'Jerry', content: 'Hello'},
      {username: 'Tomy', content: 'World'},
      {username: 'Lucy', content: 'Good'}
    ]
    return (
      <div>
        {comments.map((comment, i) => <Comment comment={comment} key={i} />)}
      </div>
    )
  }
}
export default CommentList

可以看到测试数据显示到了页面上：

之前我们说过 CommentList 的数据应该是由父组件 CommentApp 传进来的，现在我们删除测试数据，改成从 props 获取评论数据：

import React, { Component } from 'react'
import Comment from './Comment'
class CommentList extends Component {
  render() {
    return (
      <div>
        {this.props.comments.map((comment, i) =>
          <Comment comment={comment} key={i} />
        )}
      </div>
    )
  }
}
export default CommentList

这时候可以看到浏览器报错了：

这是因为CommentApp 使用 CommentList 的时候并没有传入 comments。我们给 CommentList 加上 defaultProps 防止 comments 不传入的情况：

class CommentList extends Component {
  static defaultProps = {
    comments: []
  }
...

这时候代码就不报错了。但是 CommentInput 给 CommentApp 传递的评论数据并没有传递给 CommentList，所以现在发表评论时没有反应的。

我们在 CommentApp 的 state 中初始化一个数组，来保存所有的评论数据，并且通过 props 把它传递给 CommentList。修改 CommentApp.js：

import React, { Component } from 'react'
import CommentInput from './CommentInput'
import CommentList from './CommentList'
class CommentApp extends Component {
  constructor () {
    super()
    this.state = {
      comments: []
    }
  }
  handleSubmitComment (comment) {
    console.log(comment)
  }
  render() {
    return (
      <div className='wrapper'>
        <CommentInput onSubmit={this.handleSubmitComment.bind(this)} />
        <CommentList comments={this.state.comments}/>
      </div>
    )
  }
}
export default CommentApp

接下来，修改 handleSubmitComment ：每当用户发布评论的时候，就把评论数据插入 this.state.comments 中，然后通过 setState 把数据更新到页面上：

...
  handleSubmitComment (comment) {
    this.state.comments.push(comment)
    this.setState({
      comments: this.state.comments
    })
  }
...

小提示：这里的代码直接往 state.comments 数组里面插入数据其实违反了 React.js 的 state 不可直接修改的原则 。但其实这个原则是为了 shouldComponentUpdate 的优化和变化的跟踪，而这种目的在使用 React-redux 的时候其实会自然而然达到，我们很少直接手动地优化，这时候这个原则就会显得有点鸡肋。所以这里为了降低大家的理解成本就不强制使用这个原则，有兴趣的朋友可以参考： Tutorial: Intro To React - React。

现在代码应该是可以按照需求正常运作了，输入用户名和评论内容，然后点击发布：

为了让代码的健壮性更强，给 handleSubmitComment 加入简单的数据检查：

...
  handleSubmitComment (comment) {
    if (!comment) return
    if (!comment.username) return alert('请输入用户名')
    if (!comment.content) return alert('请输入评论内容')
    this.state.comments.push(comment)
    this.setState({
      comments: this.state.comments
    })
  }
...

到这里，我们的第一个实战案例——评论功能已经完成了！完整的案例代码可以在这里 comment-app 找到， 在线演示 体验。

总结

在这个案例里面，我们除了复习了之前所学过的内容以外还学习了新的知识点。包括：

1. 实现功能之前先理解、分析需求，划分组件。并且掌握划分组件的基本原则——可复用性、可维护性。
2. 受控组件的概念，React.js 中的 <input /> 、<textarea />、<select /> 等元素的 value 值如果是受到 React.js 的控制，那么就是受控组件。
3. 组件之间使用 props 通过父元素传递数据的技巧。

当然，在真实的项目当中，这个案例很多地方是可以优化的。包括组件可复用性方面（有没有发现其实 CommentInput 中有重复的代码？）、应用的状态管理方面。但在这里为了给大家总结和演示，实现到这个程度也就足够了。

到此为止，React.js 小书的第一阶段已经结束，你可以利用这些知识点来构建简单的功能模块了。但是在实际项目如果要构建比较系统和完善的功能，还需要更多的 React.js 的知识还有关于前端开发的一些认知来协助我们。接下来我们会开启新的一个阶段来学习更多关于 React.js 的知识，以及如何更加灵活和熟练地使用它们。让我们进入第二阶段吧！

实战分析：评论功能（四）

目前为止，第二阶段知识已经基本介绍完，我们已经具备了项目上手实战必备的 React.js 知识，现在可以把这些知识应用起来。接下来是实战环节，我们会继续上一阶段的例子，把评论功能做得更加复杂一点。

我们在上一阶段的评论功能基础上加上以下功能需求：

1. 页面加载完成自动聚焦到评论输入框。
2. 把用户名持久化，存放到浏览器的 LocalStorage 中。页面加载时会把用户名加载出来显示到输入框，用户就不需要重新输入用户名了。
3. 把已经发布的评论持久化，存放到浏览器的 LocalStorage 中。页面加载时会把已经保存的评论加载出来，显示到页面的评论列表上。
4. 评论显示发布日期，如“1 秒前”，”30 分钟前”，并且会每隔 5 秒更新发布日期。
5. 评论可以被删除。
6. 类似 Markdown 的行内代码块显示功能，用户输入的用 ` 包含起来的内容都会被处理成用元素包含。例如输入console.log就会处理成console.log` 再显示到页面上。

...
    <textarea
      ref={(textarea) => this.textarea = textarea}
      value={this.state.content}
      onChange={this.handleContentChange.bind(this)} />
...

class CommentInput extends Component {
  static propTypes = {
    onSubmit: PropTypes.func
  }
  constructor () {
    super()
    this.state = {
      username: '',
      content: ''
    }
  }
  componentDidMount () {
    this.textarea.focus()
  }
...

...
    <input
      value={this.state.username}
      onBlur={this.handleUsernameBlur.bind(this)}
      onChange={this.handleUsernameChange.bind(this)} />
...

class CommentInput extends Component {
  constructor () {
    super()
    this.state = {
      username: '',
      content: ''
    }
  }
  componentDidMount () {
    this.textarea.focus()
  }
  _saveUsername (username) {
    localStorage.setItem('username', username)
  }
  handleUsernameBlur (event) {
    this._saveUsername(event.target.value)
  }
...

...
  componentWillMount () {
    this._loadUsername()
  }
  _loadUsername () {
    const username = localStorage.getItem('username')
    if (username) {
      this.setState({ username })
    }
  }
  _saveUsername (username) {
    localStorage.setItem('username', username)
  }
...

<CommentInput
  onSubmit={this.handleSubmitComment.bind(this)} />

class CommentApp extends Component {
  constructor () {
    super()
    this.state = {
      comments: []
    }
  }
  componentWillMount () {
    this._loadComments()
  }
  _loadComments () {
    let comments = localStorage.getItem('comments')
    if (comments) {
      comments = JSON.parse(comments)
      this.setState({ comments })
    }
  }
  _saveComments (comments) {
    localStorage.setItem('comments', JSON.stringify(comments))
  }
  handleSubmitComment (comment) {
    if (!comment) return
    if (!comment.username) return alert('请输入用户名')
    if (!comment.content) return alert('请输入评论内容')
    const comments = this.state.comments
    comments.push(comment)
    this.setState({ comments })
    this._saveComments(comments)
  }
...

...
  handleSubmit () {
    if (this.props.onSubmit) {
      this.props.onSubmit({
        username: this.state.username,
        content: this.state.content,
        createdTime: +new Date()
      })
    }
    this.setState({ content: '' })
  }
...

class Comment extends Component {
  static propTypes = {
    comment: PropTypes.object.isRequired
  }
  constructor () {
    super()
    this.state = { timeString: '' }
  }
  componentWillMount () {
    this._updateTimeString()
  }
  _updateTimeString () {
    const comment = this.props.comment
    const duration = (+Date.now() - comment.createdTime) / 1000
    this.setState({
      timeString: duration > 60
        ? `${Math.round(duration / 60)} 分钟前`
        : `${Math.round(Math.max(duration, 1))} 秒前`
    })
  }
  render () {
    return (
      <div className='comment'>
        <div className='comment-user'>
          <span>{this.props.comment.username} </span>：
        </div>
        <p>{this.props.comment.content}</p>
        <span className='comment-createdtime'>
          {this.state.timeString}
        </span>
      </div>
    )
  }
}

...
  componentWillMount () {
    this._updateTimeString()
    this._timer = setInterval(
      this._updateTimeString.bind(this),
      5000
    )
  }
...

...
  render () {
    const { comment } = this.props
    return (
      <div className='comment'>
        <div className='comment-user'>
          <span className='comment-username'>
            {comment.username}
          </span>：
        </div>
        <p>{comment.content}</p>
        <span className='comment-createdtime'>
          {this.state.timeString}
        </span>
        <span className='comment-delete'>
          删除
        </span>
      </div>
    )
  }
...

class Comment extends Component {
  static propTypes = {
    comment: PropTypes.object.isRequired,
    onDeleteComment: PropTypes.func,
    index: PropTypes.number
  }
...
  handleDeleteComment () {
    if (this.props.onDeleteComment) {
      this.props.onDeleteComment(this.props.index)
    }
  }
  render () {
    ...
        <span
          onClick={this.handleDeleteComment.bind(this)}
          className='comment-delete'>
          删除
        </span>
      </div>
    )
  }

class CommentList extends Component {
  static propTypes = {
    comments: PropTypes.array,
    onDeleteComment: PropTypes.func
  }
  static defaultProps = {
    comments: []
  }
  handleDeleteComment (index) {
    if (this.props.onDeleteComment) {
      this.props.onDeleteComment(index)
    }
  }
  render() {
    return (
      <div>
        {this.props.comments.map((comment, i) =>
          <Comment
            comment={comment}
            key={i}
            index={i}
            onDeleteComment={this.handleDeleteComment.bind(this)} />
        )}
      </div>
    )
  }
}

...
  handleDeleteComment (index) {
    console.log(index)
  }
  render() {
    return (
      <div className='wrapper'>
        <CommentInput onSubmit={this.handleSubmitComment.bind(this)} />
        <CommentList
          comments={this.state.comments}
          onDeleteComment={this.handleDeleteComment.bind(this)} />
      </div>
    )
  }
}
...

...
  handleDeleteComment (index) {
    const comments = this.state.comments
    comments.splice(index, 1)
    this.setState({ comments })
    this._saveComments(comments)
  }
...

...
  componentWillUnmount () {
    clearInterval(this._timer)
  }
...

<p>{comment.content}</p>

<p dangerouslySetInnerHTML={{
  __html: this._getProcessedContent(comment.content)
}} />

...
  _getProcessedContent (content) {
    return content
      .replace(/`([\S\s]+?)`/g, '<code>$1</code>')
  }
...

...
  _getProcessedContent (content) {
    return content
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;")
      .replace(/`([\S\s]+?)`/g, '<code>$1</code>')
  }
...