ReactJS - 使用新创建的组件

引言

你好，未来的React开发者们！我很高兴能成为你们在这个激动人心的React组件世界中的向导。作为一个教计算机科学多年的老师，我可以告诉你，理解组件就像学习用乐高积木建造——一旦你掌握了它，你就能创造出惊人的东西！

React组件是什么？

在我们深入使用组件之前，让我们先了解一下它们是什么。把组件想象成你用户界面中可重用的构建块。就像你可以在你的创作的不同部分使用相同的乐高积木一样，你可以在应用程序的各个部分使用相同的React组件。

组件类型

React主要有两种类型的组件：

1. 函数组件
2. 类组件

在这个教程中，我们将专注于函数组件，因为它们更简单、更现代。

创建你的第一个组件

让我们从一个简单的组件开始。我们将创建一个“Greeting”组件，显示一个欢迎信息。

function Greeting() {
return <h1>你好，React学习者！</h1>;
}

这可能看起来很简单，但这里发生了很多事情：

• 我们定义了一个名为Greeting的函数
• 这个函数返回了JSX（那种类似HTML的语法）
• JSX代表了将被渲染在屏幕上的内容

使用你新创建的组件

现在我们有了Greeting组件，让我们在应用程序中使用它！

function App() {
return (
<div>
<Greeting />
<p>欢迎来到我们的React教程！</p>
</div>
);
}

这里发生了什么：

• 我们有一个App组件（我们应用程序的主组件）
• 在App内部，我们使用了我们的Greeting组件
• 我们像使用HTML标签一样使用组件

当你运行这段代码时，你将看到“你好，React学习者！”后面跟着“欢迎来到我们的React教程！”

带有Props的组件

当我们使用props使组件动态化时，组件变得非常强大。Props就像是你的组件的参数。

让我们修改我们的Greeting组件，使其接受一个名字：

function Greeting(props) {
return <h1>你好，{props.name}！</h1>;
}

现在，我们可以像这样使用它：

function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
}

这将显示：

你好，Alice！
你好，Bob！

这难道不酷吗？我们创建了一个可重用的组件，可以问候不同的人！

带有多个Props的组件

让我们更进一步，创建一个更复杂的组件。我们将创建一个UserCard组件，显示用户的信息。

function UserCard(props) {
return (
<div className="user-card">
<h2>{props.name}</h2>
<p>年龄：{props.age}</p>
<p>职业：{props.occupation}</p>
</div>
);
}

现在我们可以这样使用它：

function App() {
return (
<div>
<UserCard name="Alice" age={28} occupation="开发者" />
<UserCard name="Bob" age={35} occupation="设计师" />
</div>
);
}

组件嵌套

React最强大的特性之一是能够嵌套组件。让我们创建一个UserList组件，它使用多个UserCard组件：

function UserList() {
return (
<div>
<h1>用户列表</h1>
<UserCard name="Alice" age={28} occupation="开发者" />
<UserCard name="Bob" age={35} occupation="设计师" />
<UserCard name="Charlie" age={42} occupation="经理" />
</div>
);
}

现在我们的App组件只需要使用UserList：

function App() {
return (
<div>
<Greeting name="React学习者" />
<UserList />
</div>
);
}

组件方法

组件也可以有自己的方法。让我们在UserCard组件中添加一个方法来计算出生年份：

function UserCard(props) {
const calculateBirthYear = () => {
const currentYear = new Date().getFullYear();
return currentYear - props.age;
};

return (
<div className="user-card">
<h2>{props.name}</h2>
<p>年龄：{props.age}</p>
<p>出生年份：{calculateBirthYear()}</p>
<p>职业：{props.occupation}</p>
</div>
);
}

结论

恭喜你！你已经迈出了进入React组件世界的第一步。我们涵盖了创建简单组件、使用props、嵌套组件，甚至为组件添加方法。

记住，熟能生巧。尝试创建你自己的组件，尝试不同的props，看看你能构建什么。在你意识到之前，你将能够轻松构建复杂的UI！

以下是我们在本文中创建的组件的快速参考表：

组件名称	Props	描述
Greeting	name	显示问候信息
UserCard	name, age, occupation	显示用户信息
UserList	无	显示UserCard组件的列表

继续编码，继续学习，最重要的是，在React中找到乐趣！

Credits: Image by storyset