React JSX
React 事件处理 

React Props

在 React 中，props（即"properties"，属性）是用于从父组件向子组件传递数据的机制。Props 是只读的，子组件不能修改它们，而是通过 props 接收数据并渲染相应的 UI。


React Props 的一些关键点：

  • 单向数据流：在 React 中，数据只能从父组件流向子组件，通过 props 传递。

  • 定义 Props：在子组件中，你可以通过 props 对象访问父组件传递过来的属性。

  • 默认 Props：可以使用 defaultProps 来为组件的 props 设置默认值。

  • 类型检查：React 允许你使用 PropTypes 来定义组件的 props 类型，这有助于在开发过程中捕获错误。

  • 传递 Props：父组件可以通过标签属性的形式将 props 传递给子组件。

  • 函数作为 Props：除了数据，父组件还可以将函数作为 props 传递给子组件，这通常是用于事件处理。

  • 使用 Props：在子组件中，你可以使用这些 props 来动态渲染组件。



要在 React 中使用 Props，首先在父组件中定义 Props，然后将它们作为参数传递给子组件。在子组件中，可以通过 props 对象来访问传递过来的数据。

例如，在父组件中定义一个名为 name 的 Props，并传递给子组件：


import React from 'react';

// 子组件
function SayHello(props) {
  return <h1>Hello, {props.name}！</h1>;
}

// 父组件
function App() {
  return <SayHello name="Jerry" />;
}

export default App;


在这个例子中，父组件 App 定义了一个 name 变量，并将其作为 Props 传递给子组件 SayHello。在子组件中，通过 props.name 来访问这个 Props 数据，从而显示出 "你好，我的名字是 Jerry！"