【React+AntD+Ts】父子组件通信

前提：1. React 18, Ant Design5, TypeScript的项目。
2.父组件和子组件在项目里是不同的文件，且子组件是被抽离出来供多个组件使用的。子组件是一个Modal，Modal里是一个包含多个文字列和一个图片列内容的Table，而且该Table第一列有选择器，可以选择某一行内容。
要求：1. 父组件有一个Button，点击可以打开子组件Modal。
2.子组件选择某行内容且点击确认按钮后关闭子组件Modal并把子组件选择的内容传回给父组件展示。
3. 父组件渲染子组件Modal传回来的Table中的图片和文字。

要实现父组件和子组件之间的数据传递和展示，您可以按照以下步骤进行操作：

1. 在父组件中创建一个状态来存储子组件选择的内容，以及控制子组件Modal的显示和隐藏。

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

const ParentComponent: React.FC = () => {
  const [selectedData, setSelectedData] = useState<any>(null);
  const [isModalVisible, setIsModalVisible] = useState(false);

  const handleOpenModal = () => {
    setIsModalVisible(true);
  };

  const handleConfirm = (data: any) => {
    setSelectedData(data);
    setIsModalVisible(false);
  };

  return (
    <>
      <button onClick={handleOpenModal}>Open Modal</button>
      <ChildComponent
        isVisible={isModalVisible}
        onConfirm={handleConfirm}
      />
      {selectedData && (
        <>
          <p>Selected Text: {selectedData.text}</p>
          <img src={selectedData.image} alt="Selected Image" />
        </>
      )}
    </>
  );
};

export default ParentComponent;

2. 在子组件中，创建一个状态来存储选择的行数据，并在确认按钮点击时将数据传递给父组件。

import React, { useState } from 'react';
import { Modal, Table, Button } from 'antd';

interface ChildComponentProps {
  isVisible: boolean;
  onConfirm: (data: any) => void;
}

const ChildComponent: React.FC<ChildComponentProps> = ({
  isVisible,
  onConfirm,
}) => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
  const [dataSource] = useState<any[]>([
    { key: '1', text: 'Text 1', image: 'image1.jpg' },
    { key: '2', text: 'Text 2', image: 'image2.jpg' },
    { key: '3', text: 'Text 3', image: 'image3.jpg' },
  ]);

  const handleTableSelect = (selectedKeys: string[]) => {
    setSelectedRowKeys(selectedKeys);
  };

  const handleConfirm = () => {
    const selectedData = dataSource.find((item) => item.key === selectedRowKeys[0]);
    onConfirm(selectedData);
  };

  return (
    <Modal visible={isVisible} onCancel={() => setIsModalVisible(false)} onOk={handleConfirm}>
      <Table
        dataSource={dataSource}
        columns={[
          { title: 'Text', dataIndex: 'text' },
          { title: 'Image', dataIndex: 'image', render: (image) => <img src={image} alt="Image" /> },
        ]}
        rowSelection={{
          type: 'radio',
          selectedRowKeys,
          onChange: handleTableSelect,
        }}
      />
      <Button onClick={handleConfirm}>Confirm</Button>
    </Modal>
  );
};

export default ChildComponent;

在这个例子中，父组件通过selectedData状态来存储子组件选择的数据，并根据需要进行展示。子组件使用isVisible状态来控制Modal的显示和隐藏，并通过onConfirm回调函数将选择的数据传递给父组件。在父组件中，当selectedData有值时，展示选择的文本和图片。

请注意，上述代码只是一个示例，您可能需要根据您的具体需求进行适当的修改和调整。