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 element 。

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

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

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

1 个答案: