@lexstile

Как обращаться к дочерним компонентам через точку в REACT?

Есть компонент :
// @flow
import * as React from 'react';
import Header from './ModalHeader';
import Body from './ModalBody';
import Footer from './ModalFooter';

export class Modal extends React.PureComponent<{}> {
  render() {
    const {
      modalTitle,
      modalBody,
      modalFooter,
    } = this.props;
    console.log(this.props, 'Modal');
    return (
      <div className="modal">
        <Header modalTitle={modalTitle} />
        <Body modalBody={modalBody} />
        <Footer modalFooter={modalFooter} />
      </div>
    );
  }
}

Есть компонент :
// @flow
import * as React from 'react';

export default class Header extends React.PureComponent<{}> {
  render() {
    const {
      children,
    } = this.props;
    console.log(this.props, 'Header');
    return (
      <div className="modal__header">
        {children && (children)}
      </div>
    );
  }
}

Я хочу обращаться так:
<Modal.Header>
          1111
        </Modal.Header>

Как это реализовать?
  • Вопрос задан
  • 182 просмотра
Решения вопроса 1
@karminski
Senior React.JS Developer
Легко гуглится на медиуме
https://medium.com/risan/react-component-with-dot-...

И даже еще проще в оф.доках на русском языке
https://ru.reactjs.org/docs/jsx-in-depth.html

Жалоба на вас за неумение пользоваться поиском.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы