Блог

Я хочу открыть тег компонента контейнера (стилизованный компонент) в компоненте верхнего колонтитула и закрыть его в компоненте нижнего колонтитула. Как я могу это сделать?

Компонент заголовка

 import React from 'react';
import {
  HeaderDefault, Nav, Logo, HeaderFlex, Container,
} from '../../style';

export default () => (
  <>

    <HeaderDefault>
    
    // I want to open tag here
   <Container> 
      <HeaderFlex>
        <Logo>
          <img src="src/assets/img/logo192.png" />
        </Logo>
        <Nav>
          Menu
        </Nav>
      </HeaderFlex>
     </HeaderDefault>

  </>
);
  

Компонент нижнего колонтитула

 import React from 'react';
import { FooterDefault, Container } from '../../style';

export default () => (
  <>
    <FooterDefault><h1>footer</h1></FooterDefault>
    
    // and close tag here
    </Container> 
  </>
);
  

Я не уверен в вашем вопросе, теги JSX должны совпадать в одном файле, возможно, вам следует использовать Container в одном компоненте и импортировать Footer в этот компонент, например

 import React from 'react';
import {
  HeaderDefault, Nav, Logo, HeaderFlex, Container,
} from '../../style';
// import Footer Component from your second file
import Footer from './Footer';

export default () => (
  <>

    <HeaderDefault>
    
    // I want to open tag here
   <Container> 
      <HeaderFlex>
        <Logo>
          <img src="src/assets/img/logo192.png" />
        </Logo>
        <Nav>
          Menu
        </Nav>
      </HeaderFlex>
     </HeaderDefault>

     <Footer />
    </Container>
  </>
);
  

 import React from 'react';
import { FooterDefault, Container } from '../../style';

export default () => (
  <>
    <FooterDefault><h1>footer</h1></FooterDefault>
  </>
);