在 React 中,父组件向子组件传递数据可以通过 props,而子组件向父组件传递数据则需要通过回调函数的方式。
下面是两种常见的父子组件通信方式:
1:父组件向子组件传递数据(Props):
在父组件中,通过在子组件上设置属性(props)的方式将数据传递给子组件。
子组件通过 props 接收父组件传递的数据,并在渲染过程中使用这些数据。
示例代码:
// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const data = 'Hello, child!';
return (
<div>
<ChildComponent data={data} />
</div>
);
}
// 子组件
import React from 'react';
function ChildComponent(props) {
const { data } = props;
return <div>{data}</div>;
}
2:子组件向父组件传递数据(回调函数):
在父组件中定义一个回调函数,并将该函数作为 props 传递给子组件。
子组件通过调用父组件传递的回调函数,并将需要传递的数据作为参数,来向父组件传递数据。
示例代码: