javascript - ReactJS 删除特定页面上的根组件

Question

我正在寻找可以删除 <header/> 的解决方案和 <footer/>来 self 的 signup.js 的组件和 signin.js页面。

目前，我的根index.js文件显示为

class Template extends React.Component {
render() {
    const { children } = this.props
    return (
        <main>
          <Header/>
          {children()}
          <Footer/>
        </main>
    )
}}
Template.propTypes = {
    children: PropTypes.func
}
export default Template

这是我所有页面、帖子、产品等的主要布局。但在不创建其他布局的情况下，我想有条件地删除 <header/>和 <footer/>组件成为页面的一部分signup.js和 signin.js

按照 GatsbyJS 的建议，我已经尝试过 - 从所有页面中删除组件。

if (this.props.location.pathname !== "/signup/") {
   return (
      <main>
         {children()}
      </main>
    )
} else {
    return this (
      <main>
         <Header/>
         {children()}
         <Footer/>
      </main>
    )
}

Answer 1

我会为您的登录和注册组件使用不同的模板，但如果您不这样做:

你的代码中有一个错字，在你的 else 中你正在返回 this(...) 它应该返回 (...)。这样:

if (this.props.location.pathname !== "/signup/") {
   return (
      <main>
         {children()}
      </main>
    )
} else {
    return (
      <main>
         <Header/>
         {children()}
         <Footer/>
      </main>
    )
}

此外，也许您的 if 条件被反转了...因为在 /signup/ 中您不需要 Header 和 页脚:

if (this.props.location.pathname === "/signup/" || this.props.location.pathname === "/signin/") {
   return (
      <main>
         {children()}
      </main>
    )
} else {
    return (
      <main>
         <Header/>
         {children()}
         <Footer/>
      </main>
    )
}