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

Question

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

目前，我的根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 中，您正在 returning this(...) 它应该 return (...)。这样：

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

此外，也许您的 if 条件被颠倒了...因为在 /signup/ 中您不想要 Header 和 Footer:

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

Answer 2

或者，如果您不想重复代码...

const isSignIn = ["/signup/", "/signin/"].indexOf( this.props.location.pathname) !== 0;

return (
  <main>
     { !isSignIn && (<Header/>) }
     {children()}
     { !isSignIn && (<Footer/>) }
  </main>
)

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

ReactJS remove root component on certain page

javascript

reactjs

gatsby