如何在 ReactJS 中写评论？

如果你正在构建一个基于 ReactJS 的 Web 应用，并且你需要为你的应用添加评论功能，那么你来到了一个正确的地方。本文将向你介绍一个基本的 ReactJS 评论组件，让你可以轻松地与用户进行交互。

创建评论组件

首先，我们需要创建一个类似于下面的评论组件:

import React from 'react';

class CommentBox extends React.Component {
  render() {
    return (
      <div className="comment-box">
        <h2>Comments</h2>
        {/* 显示评论列表 */}
        <CommentList />
        {/* 显示评论表单 */}
        <CommentForm />
      </div>
    );
  }
}

如上所示，评论组件包含一个标题和两个子组件：评论列表和评论表单。现在我们来逐一介绍这些子组件。

创建评论列表

在这个示例中，我们使用 CommentList 组件来显示评论。这个组件看起来像是这样:

import React from 'react';
import Comment from './Comment';

class CommentList extends React.Component {
  render() {
    return (
      <div className="comment-list">
        {/* 显示每条评论 */}
        <Comment author="John Smith">This is a comment.</Comment>
        <Comment author="Jane Doe">This is *another* comment.</Comment>
      </div>
    );
  }
}

如上所示，评论列表包含多个 Comment 组件，每个 Comment 组件表示一条评论。现在我们来详细了解一下 Comment 组件。

创建评论

对于每条评论，我们使用 Comment 组件来显示。这个组件看起来像是这样:

import React from 'react';
import marked from 'marked';

class Comment extends React.Component {
  rawMarkup() {
    const rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return { __html: rawMarkup };
  }

  render() {
    return (
      <div className="comment">
        <h3 className="comment-author">{this.props.author}</h3>
        {/* 显示评论内容 */}
        <span dangerouslySetInnerHTML={this.rawMarkup()} />
      </div>
    );
  }
}

如上所示，每个评论包含一个姓名和评论内容。我们使用 marked 库来解析评论内容，其中 dangerouslySetInnerHTML 属性用于显示 HTML，并防止注入攻击。

创建评论表单

现在我们需要 CommentForm 组件，让用户可以添加新评论。这个组件看起来像是这样:

import React from 'react';

class CommentForm extends React.Component {
  render() {
    return (
      <div className="comment-form">
        <form>
          <input type="text" placeholder="Your name" />
          <input type="text" placeholder="Say something..." />
          <input type="submit" value="Post" />
        </form>
      </div>
    );
  }
}

对于输入表单，我们创建了两个输入框，分别用于输入用户姓名和评论内容，并创建了一个提交按钮，当用户提交评论时，我们可以将评论添加到 CommentList 组件中。

总结

在本文中，我们介绍了如何在 ReactJS 中编写一个评论组件。在这个组件中，我们创建了一个评论列表，让用户可以查看其他用户的评论，并创建了一个评论表单，让用户可以添加新评论。这个组件还使用了 marked 库来解析评论内容，并使用 dangerouslySetInnerHTML 属性来显示 HTML。如果你想使用这个组件，请将其复制并添加到你的代码中，然后根据需要进行修改。