Альтернатива для создания макета? - PullRequest
Новая
       31

Альтернатива для создания макета?

0 голосов
/ 18 декабря 2018

Я хочу создать макет, содержащий верхний и нижний колонтитулы, с серединой каждого другого компонента.

Это будет выглядеть примерно так: 

<Layout>

<Component1/>
<Component2/>
...
</Layout>

Технически я уже достиг желаемого результата с помощью контейнера семантического интерфейса реакции , и мой код выглядит следующим образом: 

import React from 'react';
import {  Container } from 'semantic-ui-react';
import Footer from './Footer';
import Header from './Head';

export default props => {
    return (
      <Container style={{width:'100%'}}>
        <Header/>
        <div style={{marginTop: '1%'}}>
        {props.children}
        </div>
        <Footer />
      </Container>
    );
  };

Я хотел бы достичь того же результата, но без использования контейнера, предлагаемого semantic-ui-реакции.На самом деле я пытался удалить <Container>, но получаю эту ошибку:

Строка 9: Ошибка синтаксического анализа: смежные элементы JSX должны быть заключены в тег.Вам нужен фрагмент JSX <> ...?

Если я полностью удаляю тег <div>, я получаю еще одну ошибку:

Ожидается неожиданный токен ", "

Я не уверен на 100%, но я понял, что должен использовать класс, расширяющий компонент реагирования.Я попробовал это, что также не удалось: 

class props extends React.Component {
  render(){  
  return (
        <Header/>
        {props.children}
        <Footer />
    );
  }
  };

  export default props;

1 Ответ

0 голосов
/ 18 декабря 2018

Вы можете удалить <Container/>, но вам все еще понадобится родительский компонент для переноса <Header/>, <Footer/> и вашего контента div, если вы хотите сохранить ту же разметку.Если по семантическим причинам вы не хотите использовать div, используйте <React.Fragment/> в качестве zfrisch упомянутых 

import React from 'react';
import {  Container } from 'semantic-ui-react';
import Footer from './Footer';
import Header from './Head';

    export default props => {
        return (
          <div style={{width:'100%'}}> // OR <React.Fragment/>
            <Header/>
            <div style={{marginTop: '1%'}}>
            {props.children}
            </div>
            <Footer />
          </div>
        );
      };
...