react + ts中父子组件传参，定义Props类型

父组件

import React, { useState } from 'react';
import Modal1 from './Modal1'; // 假设你的子组件文件名是 Modal1.tsx

// 定义 record 对象的接口
interface RecordType {
  obj: any; // 根据实际的 obj 类型进行替换
  title: string;
  Isloding: boolean;
}

const ParentComponent = () => {
  const [open, setOpen] = useState(false);
  const [isModel, setIsModel] = useState(false);
  const [Record, setRecord] = useState<RecordType | null>(null);

  const handleClose = (newValue: boolean) => {
    setOpen(newValue);
    setIsModel(newValue);
  };

  return (
    <div>
      <button onClick={() => setOpen(true)}>Open Modal</button>
      <Modal1 open={open} isModel={setIsModel} Record={Record} handleClose={handleClose} />
    </div>
  );
};

export default ParentComponent;

子组件

import React from 'react';

// 定义 record 对象的接口
interface RecordType {
  obj: any; // 根据实际的 obj 类型进行替换
  title: string;
  Isloding: boolean;
}

// 定义 ModalProps 类型
export type ModalProps = {
  open: boolean;
  //isModel是一个方法，并且有一个形参
  isModel: (i: boolean) => void;
  Record: RecordType | null;
  handleClose: (value: boolean, anotherParam: string) => void; // 添加 handleClose 方法的类型定义，包含两个参数类型
};

export default function Modal1(props: ModalProps) {
  const { open, isModel, Record, handleClose } = props;

  if (!open) return null;

  return (
    <div className="modal">
      {/* 在这里渲染你的模态框内容 */}
      {Record && (
        <div>
          <p>Title: {Record.title}</p>
          <p>Isloding: {Record.Isloding ? 'true' : 'false'}</p>
          {/* 根据需要渲染 obj */}
        </div>
      )}
      <button onClick={() => handleClose(false, 'example')}>Close</button>
    </div>
  );
}