react跨组件传参(ts)

父传子：

 // 父组件
import React, { useState } from "react";
import ChildrenComponent from "./children";
const ParentComponent: React.FC = () => {
  const [name, setName] = useState<string>("小明");
  const [age, setAge] = useState<number>(16);

  return (
    <>
      <div></div>
      <ChildrenComponent name={name} age={age} />
    </>
  );
};
export default ParentComponent;

// 子组件
import React from "react";
interface paramsProps {
    name:string;
    age:number;
}
const ChildrenComponent: React.FC<paramsProps> = (props: paramsProps) => {
    const {name,age} = props;
  return (
    <>
      <ul>
        <li>姓名：{name}</li>
        <li>年龄：{age}</li>
      </ul>
    </>
  );
};
export default ChildrenComponent;

子传父

(由子组件触发事件传值)

// 父组件
import React, { useState } from "react";
import ChildrenComponent from "./children";
const ParentComponent: React.FC = () => {
  const [name, setName] = useState<string>("小明");
  const [age, setAge] = useState<number>(16);

  const updateName = (param: string) => {
    setName(param);
  };

  const updateAge = (param: number) => {
    setAge(param);
  };

  return (
    <>
      <ul>
        <li>姓名：{name}</li>
        <li>年龄：{age}</li>
      </ul>
      <ChildrenComponent updateName={updateName} updateAge={updateAge} />
    </>
  );
};
export default ParentComponent;

// 子组件
import React, { useRef } from "react";
interface paramsProps {
  updateName: (param: string) => void;
  updateAge: (param: number) => void;
}
const ChildrenComponent: React.FC<paramsProps> = (props: paramsProps) => {
  const { updateName, updateAge } = props;
  const inputNameRef = useRef<any>(null);
  const inputAgeRef = useRef<any>(null);
  const updateInfo = () => {
    console.log(inputNameRef);
    updateName(inputNameRef?.current?.value);
    updateAge(inputAgeRef?.current?.value);
  };

  return (
    <>
      姓名
      <input type="text" ref={inputNameRef} />
      年龄
      <input type="text" ref={inputAgeRef} />
      <button onClick={updateInfo}>更新</button>
    </>
  );
};
export default ChildrenComponent;

(由父组件触发事件传值)

// 父组件
import React, { useState, useRef } from "react";
import ChildrenComponent from "./children";
const ParentComponent: React.FC = () => {
  const [name, setName] = useState<string>("小明");
  const [age, setAge] = useState<number>(16);

  const updateRef = useRef<any>(null);

  const updateInfo = () => {
    const value = updateRef.current.getValue();
    setName(value.name);
    setAge(value.age);
  };

  return (
    <>
      <div>
        <ul>
          <li>姓名：{name}</li>
          <li>年龄：{age}</li>
        </ul>
        <button onClick={updateInfo}>更新</button>
      </div>
      <hr />
      <ChildrenComponent name={name} age={age} ref={updateRef} />
    </>
  );
};
export default ParentComponent;

// 子组件
import React, { useRef, useImperativeHandle } from "react";
interface paramsProps {
  name: string;
  age: number;
}
interface ChildrenRef {
  getValue: () => void;
}

const ChildrenComponent = React.forwardRef<ChildrenRef, paramsProps>(
  (props: paramsProps, ref) => {
    const { name, age } = props;
    const inputNameRef = useRef<any>(null);
    const inputAgeRef = useRef<any>(null);

    // 父组件可调用的属性或方法
    useImperativeHandle(ref, () => ({
      getValue: () => {
        return {
          name: inputNameRef.current.value,
          age: inputAgeRef.current.value,
        };
      },
    }));

    return (
      <>
        姓名
        <input type="text" defaultValue={name} ref={inputNameRef} />
        年龄
        <input type="text" defaultValue={age} ref={inputAgeRef} />
      </>
    );
  }
);
export default ChildrenComponent;