React 中的评论

在 React 中展示评论是一个常见的场景，我们可以通过组件化和状态管理来实现一个简单的评论系统。

简单的评论组件

下面是一个简单的评论组件，它可以展示一组评论和一个添加评论的表单。

import React from 'react';

class Comment extends React.Component {
  state = {
    comments: [
      { author: 'Alice', content: 'Nice post!' },
      { author: 'Bob', content: 'Great job!' },
    ],
    author: '',
    content: '',
  };

  handleAuthorChange = (event) => {
    this.setState({ author: event.target.value });
  };

  handleContentChange = (event) => {
    this.setState({ content: event.target.value });
  };

  handleAddComment = () => {
    const { comments, author, content } = this.state;
    const newComment = { author, content };
    this.setState({ comments: [...comments, newComment], author: '', content: '' });
  };

  render() {
    const { comments, author, content } = this.state;
    return (
      <div>
        <h1>Comments</h1>
        <ul>
          {comments.map((comment, index) => (
            <li key={index}>
              <b>{comment.author}</b> {comment.content}
            </li>
          ))}
        </ul>
        <h2>Add a comment</h2>
        <form>
          <label>
            Author:
            <input type="text" value={author} onChange={this.handleAuthorChange} />
          </label>
          <br />
          <label>
            Content:
            <textarea value={content} onChange={this.handleContentChange} />
          </label>
          <br />
          <button type="button" onClick={this.handleAddComment}>
            Add Comment
          </button>
        </form>
      </div>
    );
  }
}

export default Comment;

修改评论组件

如果我们想要进行更多修改，比如删除评论或者编辑评论，可以通过继续扩展状态和事件处理器来实现。此外，我们也可以将评论组件拆分为更小的组件，比如一个单独的评论项组件和一个添加评论的表单组件。

结论

通过 React 的组件化和状态管理，我们可以轻松地实现一个功能齐全的评论系统。这个系统不仅易于扩展，还有很好的可读性和可维护性。