import React, { useState } from 'react';
// 子组件
const ChildComponent = ({ name }) => {
return (
<div>
<h2>Hello, {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
作为属性进行渲染。
父组件通过 JSX 将子组件进行渲染,并将 name
状态作为属性传递给子组件。在父组件中,我们还创建了一个按钮,当点击按钮时,会调用 handleChangeName
函数,该函数会更新 name
状态的值为 'Jane Smith'
。
这个示例展示了以下概念:
-
创建和组织组件:我们创建了一个父组件和一个子组件,并通过 JSX 在父组件中渲染子组件。
-
传递数据:父组件通过属性将数据(
name
)传递给子组件。 -
管理状态:使用
useState
Hook 在父组件中创建和管理状态(name
)。 -
数据的动态更新:父组件中的点击按钮触发了状态更新,从而导致子组件中的数据更新和重新渲染。
这个示例虽然简单,但它演示了 React 的基本概念和用法。通过学习和实践类似的示例,你将更深入地理解和掌握如何创建和组织组件、传递数据以及管理状态,从而构建更复杂、功能丰富的 React 应用程序。