0
点赞
收藏
分享

微信扫一扫

爬虫常见风控

西特张 2023-11-12 阅读 44
import React, { useState } from 'react';

// 子组件
const ChildComponent = (props) => {
  return (
    <div>
      <h2>Hello, {props.name}!</h2>
    </div>
  );
}

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

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

  return (
    <div>
      <h1>Parent Component:</h1>
      <ChildComponent name={name} />
      <button onClick={handleChangeName}>Change Name</button>
    </div>
  );
}

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 中有效地使用属性和状态来传递和管理数据。

举报

相关推荐

0 条评论