React通过属性 (props) 和状态 (state) 来传递和管理组件的数据

import React, { useState } from 'react';

// 子组件
const ChildComponent = (props) => {
  return (
    

      
Hello, {props.name}!
    
  );
}

// 父组件
const ParentComponent = () => {
  const [name, setName] = useState('John Doe');

  const handleChangeName = () => {
    setName('Jane Smith');
  };

  return (
    

      
Parent Component:
      
      Change Name
    
  );
}

export default ParentComponent;

在这个示例中，我们有一个父组件 ParentComponent 和一个子组件 ChildComponent。父组件通过 useState Hook 创建一个名为 name 的状态，初始值为 'John Doe'。然后，我们将 name 作为属性传递给子组件。

在子组件中，我们使用 props 参数来接收父组件传递的属性。在这种情况下，我们使用 props.name 来访问传递的名字属性，并在子组件的 JSX 中进行渲染。

当点击父组件中的按钮时，handleChangeName 函数会被调用，它会更新父组件的状态，将名字从 'John Doe' 更改为 'Jane Smith'。这将导致子组件接收到更新后的属性，并相应地更新渲染的内容。

这个示例展示了以下概念：

1. 属性 (props)：父组件通过属性将数据 (name) 传递给子组件。子组件通过 props 参数接收属性。

2. 状态 (state)：父组件使用 useState Hook 创建和管理一个状态 (name)。

3. 数据的动态更新：当父组件的状态更新时，传递给子组件的属性也会更新，从而导致子组件的重新渲染。

这个示例演示了通过属性和状态传递和管理组件数据的基本概念。深入学习和实践类似的示例将帮助你更加熟悉和掌握如何在 React 中有效地使用属性和状态来传递和管理数据。