ReactJS - 使用属性创建组件

你好，未来的React开发者们！今天，我们将踏上一段激动人心的旅程，探索React组件和属性的世界。作为你友好的邻居计算机老师，我将在这一过程中一步步地引导你。所以，拿起你最喜欢的饮料，坐舒适些，让我们一起深入探讨！

React组件和属性是什么？

在开始创建组件之前，让我们先了解一下它们是什么。想象你正在用乐高积木建造一座房子。每一块乐高积木就像一个React组件——你Web应用程序的可重用构建块。现在，如果你想要定制这些乐高积木呢？这时属性（或props）就派上用场了。它们就像你给每一块乐高积木的特殊指令，让它们变得独一无二。

如何使用属性创建组件

让我们从一个简单的例子开始。我们将创建一个“Greeting”组件，对不同的人说你好。

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

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

让我们分解一下：

1. 我们定义了一个名为Greeting的函数，它接受props作为参数。
2. 在函数内部，我们返回了一些JSX（这是React在JavaScript中编写类似HTML代码的方式）。
3. 我们使用{props.name}来插入name属性的值。
4. 在我们的App组件中，我们三次使用了<Greeting />，分别传递了不同的name属性。

当你运行这段代码时，你将看到三个问候语，每个问候语都有一个不同的名字。这就像有一个友好的机器人，可以问候你介绍给它的任何人！

添加更多属性

现在，让我们通过添加一些属性来使我们的问候语更有趣：

function Greeting(props) {
return (
<div>
<h1>你好，{props.name}！</h1>
<p>你今年{props.age}岁，你喜欢{props.hobby}。</p>
</div>
);
}

function App() {
return (
<div>
<Greeting name="Alice" age={25} hobby="画画" />
<Greeting name="Bob" age={30} hobby="弹吉他" />
</div>
);
}

在这里，我们添加了age和hobby属性。注意到我们是如何对age属性使用大括号{}的吗？这是因为我们传递的是一个数字，而不是字符串。对于字符串，我们使用引号，但对于数字或JavaScript表达式，我们使用大括号。

使用对象作为属性

有时，将相关数据组合成一个对象会很方便。让我们重构我们的Greeting组件，以使用对象属性：

function Greeting(props) {
return (
<div>
<h1>你好，{props.person.name}！</h1>
<p>你今年{props.person.age}岁，你喜欢{props.person.hobby}。</p>
</div>
);
}

function App() {
const alice = { name: "Alice", age: 25, hobby: "画画" };
const bob = { name: "Bob", age: 30, hobby: "弹吉他" };

return (
<div>
<Greeting person={alice} />
<Greeting person={bob} />
</div>
);
}

在这个版本中，我们传递了一个包含每个人所有信息的单个person对象作为属性。这可以使你的代码更整洁，尤其是当你有很多相关属性时。

属性解构

随着你的组件增长，你可能发现自己经常输入props.。有一个很棒的技巧叫做“解构”，可以使你的代码更简洁：

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>你好，{name}！</h1>
<p>你今年{age}岁，你喜欢{hobby}。</p>
</div>
);
}

这和我们的前一个例子做同样的事情，但更简洁。我们说的是“取person属性并从中提取name、age和hobby”。

默认属性

如果有人忘记向我们的组件传递属性怎么办？我们可以设置默认值以避免错误：

function Greeting({ person = { name: "访客", age: "未知", hobby: "神秘" } }) {
const { name, age, hobby } = person;
return (
<div>
<h1>你好，{name}！</h1>
<p>你今年{age}岁，你喜欢{hobby}。</p>
</div>
);
}

现在，如果我们使用<Greeting />而不传递任何属性，它将使用这些默认值而不是崩溃。

Prop Types

随着你的应用程序增长，检查你是否获得了正确的属性类型是一个好主意。React有一个名为PropTypes的特性，用于此目的：

import PropTypes from 'prop-types';

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>你好，{name}！</h1>
<p>你今年{age}岁，你喜欢{hobby}。</p>
</div>
);
}

Greeting.propTypes = {
person: PropTypes.shape({
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
hobby: PropTypes.string.isRequired
}).isRequired
};

这将警告你如果你传递了错误类型的数据给你的组件。这就像有一个友好的助手会双重检查你的工作！

结论

恭喜你！你刚刚学习了创建带有属性的React组件的基础知识。记住，属性是你给组件的指令，使它们动态和可重用。它们是React的核心部分，掌握它们将在你的React旅程中带你走得更远。

以下是我们在本文中讨论过的方法的快速参考表：

方法	描述
基本属性	向组件传递单个值
对象属性	传递包含多个值的单个对象
解构	从属性中提取值以使代码更简洁
默认属性	为缺失的属性设置备用值
Prop Types	验证传递给属性的值的类型

继续练习、实验和构建！React是一个强大的工具，你已经走上了成为React大师的道路。快乐编码！

Credits: Image by storyset