How to refer to child components through dot in REACT?

L

lexstile2019-04-22 12:09:19

React

lexstile, 2019-04-22 12:09:19

There is a component:

// @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>
    );
  }
}

There is a component:

// @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>
    );
  }
}

I want to handle like this:

<Modal.Header>
          1111
        </Modal.Header>

How to implement it?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Anton, 2019-04-22
@lexstile

Easy to google on the medium
https://medium.com/risan/react-component-with-dot-...
And even easier in off.docs in Russian
https://ru.reactjs.org/docs/jsx- in-depth.html
Complaint against you for not being able to use the search.