改变一个对象在CSS中的位置，将它添加到上面的元素

Question

我想写一个react网站，我想在app.js

定义页眉和页脚

<React.Fragment>
<Router>
<Header
brand="My brand"
fixed
color={"transparent"}
/>
<Switch>
<Route path="/" component={MainPage} exact />

<Redirect to="/"  />
</Switch>
<Footer style={{"""css styles...""}}/>
</React.Fragment>

问题是我想让页脚出现在它之前的元素的底部(在这种情况下，例如<MainPage />)，而不是作为底部的块元素，我怎么能做到这一点?我应该在MainPage.js中添加一些东西吗?

我宁愿在页脚标签中添加参数来代替css样式。还有一件事是，头部工作得很好，部分头部CSS看起来像这样:

absolute: {
position: "absolute",
zIndex: "1100"
},
fixed: {
position: "fixed",
zIndex: "1100"
},
container: {
...container,
minHeight: "50px",
flex: "1",
alignItems: "center",
justifyContent: "space-between",
display: "flex",
flexWrap: "nowrap"
}

标题css太长了，我希望这部分css足够了。

Answer 1

可以将其作为子元素传递:

const MainPageWithFooter = () => <MainPage><Footer style={{/*css styles*/}}/></MainPage>
// ...
<Route path="/" component={MainPageWithFooter} exact />

并且，在原始MainPage组件中:

return (
<div class='main-page'> /* Or whatever you have at MainPage*/
// Your main page stuff
// ...
{props.children}
</div>
)

但是我建议你在React组件和DOM元素之间做一个更清晰的分离:创建一个新的通用Page组件，其中包括它的主<div>，页脚和路由器。