如何在 React JavaScript 中进行评论

在 React 项目中添加评论系统是非常常见的需求，本文将介绍如何使用 React JavaScript 创建一个基本的评论组件。

安装依赖

在启动项目之前，我们需要安装必要的依赖。使用以下命令在终端中安装依赖：

npm install react react-dom

安装完成后，你就可以开始创建你的评论组件了。

创建评论组件

首先，在你的项目中创建一个文件夹，用来存放你的组件。在这个文件夹中创建一个名为"Comment.js"的文件。在这个文件中编写以下代码：

import React from "react";

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

export default Comment;

在上述代码中，我们先导入了 React 库，然后定义了一个名为 "Comment" 的函数组件。这个组件接受一个名为 "props" 的参数，在组件的 JSX 代码中使用。这里，我们在组件中使用了两个 props 属性：author 和 comment。返回的 JSX 代码将这些属性渲染在页面上。这个组件只是我们评论系统的基本组成部分，当然可以根据我们的需求进行修改或扩展。

渲染评论

我们已经定义了一个组件，现在需要在页面上渲染我们的评论。首先，在你的项目中创建一个名为 "App.js" 的文件，并编写以下代码：

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

function App() {
  return (
    <div>
      <Comment author="Tom" comment="React is awesome!" />
      <Comment author="Mary" comment="I love React." />
    </div>
  );
}

export default App;

在上述代码中，我们导入了 React 和 Comment 组件，然后在 App 组件的 JSX 代码中使用 Comment 组件两次，传递了不同的 author 和 comment 属性值。这也是我们渲染出两个不同评论的原因。

将评论系统添加到页面

我们已经定义了组件并渲染了评论，现在需要将这个评论系统添加到网站中。为此，在你的 index.js 文件中编写以下代码：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

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

在上述代码中，我们导入了 React、ReactDOM 和 App 组件，并使用 ReactDOM.render() 方法将 App 组件渲染到名为 "root" 的 HTML 元素中。

现在，你已经成功地在 React JavaScript 中创建了一个基本的评论系统。可以通过以下命令启动你的项目：

npm start

总结

在本文中，我们学习了如何在 React JavaScript 中创建一个基本的评论系统。首先，我们创建了一个名为 "Comment" 的函数组件，并在其中使用了 props。然后，我们渲染了这个组件，传递不同的属性值给它。最后，我们将评论系统添加到了网站中。希望这篇文章对你有所帮助。