React 父子组件参数传递：从子组件获取数据

在 React 中，父组件可以通过将参数传递给子组件来获取子组件的数据。然后，子组件可以通过调用父组件传递的函数并传递参数来将数据传递回父组件。

下面是一个示例，展示了如何在父组件中引用子组件并从子组件获取参数：

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

function ParentComponent() {
  const [childData, setChildData] = useState('');

  const handleChildData = (data) => {
    setChildData(data);
  };

  return (
    <div>
      <ChildComponent onChildData={handleChildData} />
      <p>子组件传递的参数: {childData}</p>
    </div>
  );
}

export default ParentComponent;

在上面的代码中，父组件通过将handleChildData函数作为onChildData属性传递给子组件来获取子组件的参数。子组件可以通过调用onChildData函数并传递参数来将数据传递回父组件。

下面是子组件的示例代码：

// 子组件
import React from 'react';

function ChildComponent({ onChildData }) {
  const handleClick = () => {
    const data = '子组件传递的参数';
    onChildData(data);
  };

  return (
    <div>
      <button onClick={handleClick}>传递参数到父组件</button>
    </div>
  );
}

export default ChildComponent;

在上面的代码中，当点击按钮时，子组件会调用handleClick函数，并传递参数给父组件的onChildData函数。

这样，当子组件传递参数到父组件时，父组件会更新childData状态并重新渲染，从而显示子组件传递的参数。