时间戳

首页 > 解决方案 > 创建布局的替代方法？

reactjs - 创建布局的替代方法？

问题描述

我想创建一个包含页眉和页脚的布局，中间是所有其他组件。

它看起来像这样：

<Layout>

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

从技术上讲，我已经通过使用语义 ui react 的 Container实现了预期的结果，我的代码如下所示：

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

我想达到相同的结果，但不使用语义-ui-react 提供的容器。我实际上试图删除<Container>，但我收到了这个错误：

第 9 行：解析错误：相邻的 JSX 元素必须包含在封闭标记中。你想要一个 JSX 片段 <>...？

如果我完全删除<div>标签，我会收到另一个错误：

意外的令牌，预期的“，”

我不是 100% 确定，但我知道我应该使用一个扩展反应组件的类。我试过这个也失败了：

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

  export default props;

标签： reactjssemantic-uireact-bootstrap

解决方案

您可以删除，但如果您希望保留相同的标记<Container/>，您仍然需要一个父组件来包装<Header/>,<Footer/>和您的 content 。div如果出于语义原因，您不想使用 a ，请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>
        );
      };

推荐阅读