Working with Function Components: Props and Event Handling函数组件：Props 和事件处理

欢迎来到 函数组件中的 Props 和事件处理！通过观看本视频，你将能够：

• 解释组件中 props 和默认 props 的作用
• 总结如何使用 props 在组件间传递数据
• 描述 props 的基本原则
• 讨论事件与 props 的结合使用方式

---

什么是 Props？

在函数组件中，属性被称为 props。它们允许你将数据从一个组件传递到另一个组件。具体来说，props 类似于一个对象，存储着组件的属性，并允许你将这些属性从父组件传递给子组件。

注意：props 是 不可变 的，这意味着数据是只读的，不能在子组件内部更改。

示例：组件中的 Props 使用

// 父组件：App
function App() {
  return (
    <EmployeeData name="John" />
  );
}

// 子组件：EmployeeData
function EmployeeData(props) {
  return <h1>{props.name}</h1>;
}

在这个例子中，App 组件通过 props 将 name 属性传递给了 EmployeeData 组件。EmployeeData 组件通过 props.name 访问并展示该数据。

---

动态传递 Props

你还可以动态传递 props。在这个例子中，父组件传递了一个动态的 employee_id 和静态的 department_id。

function App() {
  const employee_id = 111;
  return (
    <EmployeeData employee_id={employee_id} department_id={567} />
  );
}

这样，父组件的 employee_id 和 department_id 被传递给了 EmployeeData 组件。

---

默认 Props

你可以为组件的 props 定义默认值。如果父组件没有为某个 prop 提供值，子组件会使用默认值。

示例：设置默认值

function EmployeeData(props) {
  return <h1>{props.dept_name}</h1>;
}

EmployeeData.defaultProps = {
  dept_name: "Human Resources",
};

在这个例子中，如果父组件没有传递 dept_name，子组件会默认使用 "Human Resources"。

---

Props 的基本原则

• 可重用性：通过传递不同的 props，你可以创建相同组件的多种变体，而无需重复代码。
• 单向数据流：数据从父组件流向子组件，易于追踪数据的流动，帮助快速定位错误。
• 自定义性：props 使你能够根据不同的条件或数据定制组件的行为和外观。
• 组合性：通过组合简单的组件，props 帮助你构建复杂的 UI。

---

事件与 Props 的结合使用

在 React 中，事件处理与 props 结合使用非常重要。我们来看一个例子，使用 useState hook 和事件来控制子组件的行为。

示例：事件处理

function App() {
  const [showIncrease, setShowIncrease] = useState(false);
  const increase = 10000;

  const handleClick = () => {
    setShowIncrease(true);
  };

  return (
    <div>
      <button onClick={handleClick}>Show Salary Increase</button>
      {showIncrease && <div>{increase}</div>}
    </div>
  );
}

在这个例子中：

• useState 用来创建 showIncrease 状态，表示是否显示年薪增加数据。
• 当用户点击按钮时，onClick 事件触发，handleClick 函数更新状态，控制是否显示薪资增加数据。

---

总结

通过本视频，你学到了以下关键点：

• Props 存储组件的属性，并允许你从父组件传递到子组件。
• 通过 props 对象，你可以将数据传递到组件，并使用 props.attributeName 访问数据。
• 你可以使用 默认 Props 来确保即使父组件没有提供特定属性，子组件也能使用默认值。
• Props 的基本原则包括：可重用性、单向数据流、自定义性 和 组合性。
• 通过与 事件处理 相结合，你可以使用 useState hook 来控制子组件的行为。

React 中的 props 和事件处理是构建交互式应用的基础。💡

---

继续学习，掌握更多 React 的强大功能！🚀