在React中,组件之间的值传递是非常常见的需求。当同一级别的组件之间需要进行数据传递时,我们可以使用props来实现。在本文中,我将详细介绍React中同级组件之间如何进行值传递,并提供相应的源代码示例。
为了演示这个过程,我们创建两个同级组件:ParentComponent和ChildComponent。ParentComponent是父组件,ChildComponent是子组件。我们将在ParentComponent中定义一个状态变量,并将其传递给ChildComponent。
首先,我们需要创建ParentComponent组件。在这个组件中,我们定义一个状态变量message
,并将其传递给ChildComponent组件。
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const [message, setMessage] = useState('Hello from Parent');
return (
<div>
<h1>Parent Component</h1>
<ChildComponent message={message} />
</div>
);
};
export default ParentComponent;
在ParentComponent组件中,我们使用useState钩子来定义一个状态变量message
,并将其初始值设置为’Hello from Pare