如何将道具传递给函数内部的组件？

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

function ParentComponent() {
  const [propValue, setPropValue] = useState('');

  // 定义函数，将道具传递给子组件
  const passPropToChild = (prop) => {
    setPropValue(prop);
  };

  return (
    <div>
      <ChildComponent propValue={propValue} /> {/* 将道具传递给子组件 */}
      <button onClick={() => passPropToChild('道具值')}>传递道具</button>
    </div>
  );
}

export default ParentComponent;

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

function ChildComponent(props) {
  return (
    <div>
      <h1>子组件</h1>
      <p>接收到的道具值：{props.propValue}</p> {/* 使用props接收父组件传递的道具 */}
    </div>
  );
}

export default ChildComponent;