Как определить экземпляр компонента React в интерфейсе Typescript?

Question

Во-первых, я новичок в React JS и Typescript.Но в основном у меня есть функция, которая принимает объект по интерфейсу:

interface ModalContents {
    component: React.Component,
    ...
}

export default function buildModal(contents : ModalContents){
    ...
    render() {
       return (
           <Modal>
               <ModalHeader>
                   ...
               </ModalHeader>
               <ModalBody>{contents.component}</ModalBody>
               <ModalFooter>
                   ...
               </ModalFooter>
           </Modal>
       );
    }
    ...
}

Интерфейс, среди прочего, ожидает создания экземпляра компонента, который должен быть вставлен в метод render.Сейчас я использую такую ​​функцию:

class ExampleModal extends React.Component<Props, State> {
    constructor(props) {
        super(props);
        ...
    }
  render() {
    return (
        <Container id="example-modal">
            ...
        </Container>
    );
  }
}

export default buildModal({component: <ExampleModal ... />, ...});

Но для составной части объекта, которую я передаю buildModal, я получаю эту ошибку по VSC:

Type 'Element' is not assignable to type 'Component<{}, {}, any>'.

Моя цель - получить результат, подобный следующему:

<Modal> <ModalHeader> ... </ModalHeader> <ModalBody> <Container id="example-modal"> ... </Container></ModalBody> <ModalFooter> ... </ModalFooter> </Modal>

Я знаю, что вместо этого могу просто передать ComponentClass для ExampleModal и создать его экземпляр внутри buildModal, но я думаю, что это сделало бы ненужным обременительным передачу реквизита и состояний в компонент.

Так как я могу это сделать?Какой класс следует использовать внутри интерфейса?Это вообще возможно, или я что-то не так поняла здесь?

Answer 1

ExampleModal - это React компонент , <ExampleModal ... /> - это React элемент .

Учитывая, что buildModal должен принимать элемент, он должен быть:

interface ModalContents {
    component: React.ReactElement,
    ...
}