REACT - 组件与 TypeScript 中的子组件的组合

Question

react-bootstrap 让你创建模态组件：

<Modal>
    <Modal.Header>
        <Modal.Title>Modal heading</Modal.Title>
    </Modal.Header>
    <Modal.Body>
        <h4>Text in a modal</h4>
    </Modal.Body>
    <Modal.Footer>
        <Button>Close</Button>
    </Modal.Footer>
</Modal>

我想做模态组件的合成，创建一个MyModal组件：

import * as React from 'react';
import { Modal, ModalBody, ModalProps } from 'react-bootstrap';

interface Props extends ModalProps {
  plain?: boolean;
}

class MyModal extends React.Component<Props> {

  static Body: typeof ModalBody;

  constructor(props: Props) {
    super(props);
  }

  render() {
    const { plain, ...other } = this.props;
    return (
      <Modal className={plain ? 'plain' : ''} {...other} />
    );
  }
}

export default MyModal;

但如果我这样使用它：

import MyModal from './MyModal';

...

render() {
  return (
    <MyModal plain={true}>
      <MyModal.Body>
        <p>Hello!</p>
      </MyModal.Body>
    </MyModal>
  );
}

我收到以下错误：

警告：React.createElement：类型无效 -- 应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

知道出了什么问题吗？

Answer 1

static Body: typeof ModalBody;

是undefined，所以不能用作<MyModal.Body>。

如果它是从包装组件继承的，它应该是：

static Body = ModalBody;

推断出 Body 类型。

使用 TypeScript strict (strictNullChecks) 编译器选项可以避免这个问题。

REACT - 组件与 TypeScript 中的子组件的组合

REACT - Composition of a component with subcomponents in TypeScript

static

composition

typescript

reactjs

subcomponent