如何在 Typescript 接口中定义实例化的 React 组件？

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>

我知道我可以为 ExampleModal 传递 ComponentClass 而不是在 buildModal 中实例化它，但我认为这会使传递 Props 变得不必要的麻烦和组件的状态。

那我该怎么做呢？什么是正确的 class 在界面内部使用？甚至有可能，还是我对这里的概念有误？

Answer 1

ExampleModal 是 React component, <ExampleModal ... /> 是 React element.

考虑到buildModal应该接受一个元素，应该是：

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

如何在 Typescript 接口中定义实例化的 React 组件？

How to define an instantiated React component in a Typescript interface?

interface

typescript

reactjs

react-component