React子组件调用父组件的方法

// 父组件 Parent.js
import React, { useState } from 'react';
import Child from './Child';

function Parent() {
  const [message, setMessage] = useState('');

  const handleParentMethod = () => {
    setMessage('Parent method called');
  };

  return (
    <div>
      <p>{message}</p>
      <Child onParentMethod={handleParentMethod} />
    </div>
  );
}

export default Parent;

// 子组件 Child.js
import React from 'react';

const Child = (props) => {
  const handleClick = () => {
    props.onParentMethod(); // 调用父组件的方法
  };

  return (
    <button onClick={handleClick}>
      Click me to call parent method!
    </button>
  );
};

export default Child;

// 子组件 Child.js
import React, { forwardRef, useImperativeHandle } from 'react';

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    childMethod: () => console.log('Child method called'),
  }));

  return <div>Child component</div>;
});

export default Child;

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

function Parent() {
  const childRef = useRef();

  const handleClick = () => {
    if (childRef.current) {
      childRef.current.childMethod(); // 调用子组件的方法
    }
  };

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={handleClick}>Call child method</button>
    </div>
  );
}

export default Parent;