React 19中向Vue那样自定义状态和方法暴露给父组件的最佳实践

import React, { useImperativeHandle, forwardRef } from 'react';
	const ChildComponent = forwardRef((props, ref) => {
	  useImperativeHandle(ref, () => ({
	    customMethod: () => {
	      console.log('Custom method called!');
	    },
	  }));
	  return <div>Child Component</div>;
	});
	function ParentComponent() {
	  const childRef = React.useRef(null);
	  const handleClick = () => {
	    childRef.current?.customMethod();
	  };	
	  return (
	    <div>
	      <ChildComponent ref={childRef} />
	      <button onClick={handleClick}>Call Child Method</button>
	    </div>
	  );
	}

interface ChildRef {
  focus: () => void;
  getValue: () => string;
}
import React, { useImperativeHandle, useState, useRef } from "react";
// 子组件
const CustomInput = ({ ref }: { ref: React.Ref<ChildRef> }) => {
  const [value, setValue] = useState("");
  const iptRef = useRef<HTMLInputElement>(null);
  useImperativeHandle(ref, () => ({
    focus: () => {
      iptRef.current?.focus();
    },
    getValue: () => value,
  }));
  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      ref={iptRef}
    />
  );
};
// 父组件
function ParentComponent() {
  const inputRef = useRef<ChildRef>(null);
  const handleFocus = () => {
    inputRef.current?.focus();
  };
 // 得到子组件的输入框中的值
  const handleGetValue = () => {
    console.log("Input value:", inputRef.current?.getValue());
  };
  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={handleFocus}>聚焦</button>
      <button onClick={handleGetValue}>得到输入框值</button>
    </div>
  );
}
export default ParentComponent;

interface ChildRef {
  focus: () => void;
  getValue: () => string;
  close: () => void;
}
import React, { useImperativeHandle, useState, useRef } from "react";
// 子组件
const CustomInput = ({ ref }: { ref: React.Ref<ChildRef> }) => {
  const [value, setValue] = useState("");
  const iptRef = useRef<HTMLInputElement>(null);
  // 子组件的弹窗关闭
  const close = () => {
    console.log("子组件的弹窗关闭");
  };
  useImperativeHandle(ref, () => ({
    focus: () => {
      iptRef.current?.focus();
    },
    getValue: () => value,
    // 暴露子组件的弹窗关闭方法
    close: close,
  }));
  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      ref={iptRef}
    />
  );
};
// 父组件
function ParentComponent() {
  const inputRef = useRef<ChildRef>(null);
  const handleFocus = () => {
    inputRef.current?.focus();
  };
  const handleGetValue = () => {
    console.log("Input value:", inputRef.current?.getValue());
  };
  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={handleFocus}>聚焦</button>
      <button onClick={handleGetValue}>得到输入框值</button>
      <button onClick={() => inputRef.current?.close()}>关闭弹窗</button>
    </div>
  );
}
export default ParentComponent;