react hook 父子组件数据传递方式

在 React 中，父子组件之间的数据传递是一个常见的需求。父组件可以通过 props 将数据传递给子组件，而子组件可以通过回调函数将数据传递回父组件。下面是一个简单的例子，展示了如何使用 React Hooks 在父子组件之间传递数据。

首先，我们创建一个父组件 ParentComponent，它包含一个状态 parentData，并将这个状态通过 props 传递给子组件 ChildComponent。同时，父组件定义一个回调函数 handleDataFromChild，用于接收子组件传递的数据。

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [parentData, setParentData] = useState('初始数据');
  const [dataFromChild, setDataFromChild] = useState('');

  const handleDataFromChild = (childData) => {
    setDataFromChild(childData);
  };

  return (
    <div>
      <h1>父组件</h1>
      <p>父组件数据: {parentData}</p>
      <p>来自子组件的数据: {dataFromChild}</p>
      <ChildComponent 
        parentData={parentData} 
        onDataFromChild={handleDataFromChild} 
      />
    </div>
  );
};

export default ParentComponent;

接下来，我们创建子组件 ChildComponent，它接收父组件传递的 parentData 和 onDataFromChild 回调函数。子组件可以通过调用 onDataFromChild 函数将数据传递回父组件。

import React, { useState } from 'react';

const ChildComponent = ({ parentData, onDataFromChild }) => {
  const [childData, setChildData] = useState('');

  const sendDataToParent = () => {
    onDataFromChild(childData);
  };

  return (
    <div>
      <h2>子组件</h2>
      <p>来自父组件的数据: {parentData}</p>
      <input 
        type="text" 
        value={childData} 
        onChange={(e) => setChildData(e.target.value)} 
      />
      <button onClick={sendDataToParent}>发送数据到父组件</button>
    </div>
  );
};

export default ChildComponent;

在这个例子中：

1. 父组件 ParentComponent 定义了两个状态：parentData 和 dataFromChild。
2. 父组件通过 props 将 parentData 和 handleDataFromChild 回调函数传递给子组件 ChildComponent。
3. 子组件 ChildComponent 接收 parentData 和 onDataFromChild 回调函数，并通过输入框和按钮将数据传递回父组件。

这样，我们就实现了在 React Hooks 中父子组件之间的数据传递。

总结

1、父传子数据，通过props，子组件通过函数参数即可获取。
2、子传父通过事件传递，事件来源父传给子的事件作为渠道。