REACT - Композиция компонента с субкомпонентами в TypeScript - PullRequest
Новая
       34

REACT - Композиция компонента с субкомпонентами в TypeScript

0 голосов
/ 11 октября 2018

response-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: тип недопустим - ожидается строка (для встроенных компонентов) иликласс / функция (для составных компонентов), но получил: undefined.Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена.

Есть идеи, что не так?

1 Ответ

0 голосов
/ 11 октября 2018 
static Body: typeof ModalBody;

равно undefined, поэтому его нельзя использовать как <MyModal.Body>.

. Если оно унаследовано от обернутого компонента, оно должно быть: 

static Body = ModalBody;

Где Body тип выводится.

Эту проблему можно избежать, используя опцию компилятора TypeScript strict (strictNullChecks).

...