如何在 React js 中写评论 - Javascript

想要在你的 React js 应用程序中添加评论功能吗？不用担心，这篇文章将向你展示如何使用 Javascript 和 React 来创建评论组件。

步骤

第 1 步 - 创建评论组件

首先，我们需要创建一个评论组件，用于呈现所有的评论。在这个组件中，我们需要使用 JSX 来呈现评论内容。

function Comment(props) {
  return (
    <div className="comment">
      <h2 className="commentAuthor">
        {props.author}
      </h2>
      {props.children}
    </div>
  );
}

在此代码中，我们可以看到我们定义了一个名为 Comment 的函数式组件，并传入了一个名为 props 的对象。通过使用 {props.author} 和 {props.children}，我们可以获取组件的属性 author 和所有的子组件（即评论内容）。

第 2 步 - 创建评论列表组件

在我们的评论列表组件中，我们将使用前面定义的 Comment 组件来呈现所有的评论。在这个组件中，我们还将定义评论表单，以便用户可以在应用程序中添加新评论。

class CommentList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      comments: [],
      newComment: ""
    };
  }

  handleInputChange = event => {
    this.setState({ newComment: event.target.value });
  };

  handleSubmit = event => {
    event.preventDefault();

    const newComments = this.state.comments.concat([this.state.newComment]);

    this.setState({
      comments: newComments,
      newComment: ''
    });
  };

  render() {
    const commentNodes = this.state.comments.map((comment, index) => {
      return (
        <Comment key={index} author="Author">
          {comment}
        </Comment>
      );
    });

    return (
      <div className="commentList">
        {commentNodes}
        <form onSubmit={this.handleSubmit}>
          <textarea
            value={this.state.newComment}
            onChange={this.handleInputChange}
          />
          <button type="submit">提交</button>
        </form>
      </div>
    );
  }
}

在此代码中，我们定义了一个名为 CommentList 的类组件，并将其初始化为一个空数组和一个空的新评论字符串。我们还定义了两个方法，用于处理输入更改和表单提交事件。在 handleSubmit 方法中，我们使用 concat() 方法将新评论添加到评论数组中，并将所有评论保存回 state 中。

在 render() 方法中，我们呈现了所有的评论，并使用一个表单组件，以便用户可以在应用程序中添加评论。在表单中，我们绑定了输入框的 value 属性到 state 的 newComment 属性，并设置了 onChange 事件处理程序以更改 newComment 的值。

第 3 步 - 渲染评论列表

最后一步是将 CommentList 组件添加到你的应用程序中，并将其呈现给用户。在此代码中，我们将渲染 CommentList 组件，并将其添加到名为 root 的 DOM 元素中。

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

结论

在本文中，我们使用 Javascript 和 React js 来创建评论组件。我们创建了一个 Comment 组件以呈现单个评论，并创建了一个 CommentList 组件，以呈现所有评论并提供添加评论的表单。最后，我们在应用程序中呈现了 CommentList 组件，完成了评论组件的创建。