ReactJS - 属性（props）：初学者指南

你好，未来的React开发者们！今天，我们将深入React最基本的概念之一：属性，或者我们亲切地称之为“props”。如果你是编程新手，不用担心——我会一步一步引导你，就像我多年来教导无数学生一样。让我们一起开始这段激动人心的旅程！

ReactJS - Properties (props)

什么是Props？

在我们跳入代码之前，先来了解一下props是什么。想象你正在建造一座房子（我们的React应用程序）。Props就像是蓝图，告诉每个房间（组件）它应该看起来什么样以及应该包含什么。它们是一种从父组件向子组件传递数据的方式。

使用Props

让我们从一个简单的例子开始。我们将创建一个Greeting组件，显示一条个性化信息。

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

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

在这个例子中，name是我们传递给Greeting组件的prop。让我们分解一下：

我们定义了一个Greeting组件，它期望一个props对象。
在Greeting内部，我们使用props.name来访问name prop。
在我们的App组件中，我们两次使用Greeting，传递不同的name props。

当你运行这段代码时，你将看到两条问候语：“你好，Alice！”和“你好，Bob！”。

传递多个Props

Props不仅仅限于字符串。让我们扩展我们的Greeting组件，包含更多信息：

function Greeting(props) {
return (
<div>
<h1>你好，{props.name}！</h1>
<p>年龄：{props.age}</p>
<p>喜欢的颜色：{props.color}</p>
</div>
);
}

function App() {
return (
<div>
<Greeting name="Alice" age={28} color="蓝色" />
<Greeting name="Bob" age={32} color="绿色" />
</div>
);
}

现在我们传递了三个props：name、age和color。注意到我们是如何对age prop使用大括号{}的吗？这是因为我们传递的是一个数字，而不是字符串。

默认Props

有时候，你希望为一个prop设置一个备用值，以防它没有被提供。这时，默认props就派上用场了。让我们修改我们的Greeting组件，为其设置一个默认年龄：

function Greeting(props) {
return (
<div>
<h1>你好，{props.name}！</h1>
<p>年龄：{props.age}</p>
</div>
);
}

Greeting.defaultProps = {
age: 25
};

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

在这个例子中，如果我们没有提供age prop（比如Bob），它将默认为25。

Props与State

现在我们理解了props，让我们将它们与另一个重要的React概念进行比较：state。这里有一个快速的对比：

Props	State
从父组件传递到子组件	在组件内管理
只读	可以被改变
帮助组件通信	允许组件具有动态性

让我们通过一个简单的计数器组件来实际看看：

import React, { useState } from 'react';

function Counter(props) {
const [count, setCount] = useState(props.initialCount);

return (
<div>
<p>计数：{count}</p>
<button onClick={() => setCount(count + 1)}>增加</button>
</div>
);
}

function App() {
return (
<div>
<Counter initialCount={0} />
<Counter initialCount={10} />
</div>
);
}

在这个例子中：

initialCount是一个prop。它从App传递到Counter并且不会改变。
count是state。它以initialCount的值初始化，但可以被setCount函数改变。

结论

Props是React的基础部分，让你能够创建灵活、可重用的组件。它们就像是让你的React食谱独特而美味的秘密成分！

请记住：

Props从父组件流向子组件。
它们是只读的——不要尝试直接改变props！
使用默认props作为备用值。
Props用于传递数据，state用于管理数据。

在你继续React之旅的过程中，你会发现自己在越来越多地、以越来越复杂和有趣的方式使用props。但别担心——随着练习，它会变得习以为常。就像学习骑自行车一样，一旦学会了，就永远不会忘记！

继续编码，继续学习，最重要的是，享受乐趣！React是一个惊人的库，我很兴奋你能发现它所提供的一切。下次见，快乐React！

Credits: Image by storyset