父组件调用子组件方法带参数

父组件调用子组件方法并传递参数的一种常见方式是通过ref。下面是一个示例：

在父组件中：

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

function ParentComponent() {
  const childRef = useRef(null);

  const handleClick = () => {
    // 调用子组件方法并传递参数
    childRef.current.childMethod('Hello from parent');
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>调用子组件方法</button>
    </div>
  );
}

export default ParentComponent;

在子组件中：

import React, { forwardRef, useImperativeHandle } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  // 定义子组件内部方法
  const childMethod = (message) => {
    console.log(message);
  };

  // 将子组件方法暴露给父组件
  useImperativeHandle(ref, () => ({
    childMethod,
  }));

  return <div>子组件</div>;
});

export default ChildComponent;

上述示例中，父组件通过ref创建了一个引用childRef，并将其传递给子组件。在父组件的点击事件处理函数handleClick中，通过调用childRef.current.childMethod('Hello from parent')来调用子组件的方法，并传递参数。

需要注意的是，在子组件中，我们使用了forwardRef和useImperativeHandle来暴露子组件的方法给父组件。forwardRef将ref传递给子组件，useImperativeHandle用于定义父组件可以调用的方法。