javascript - 隐藏应用程序元素 React

Question

我有一个<App/>为我网站上的任何页面呈现的组件:

const App = () => (
  <div>    
    <Header />
    <Main />
    <Footer />
    <Subfooter />
    <SubfooterLegal />
  </div>
)
export default App;

我现在遇到的问题是我有一个组件(页面)，它不包含 <App /> 中的任何组件。除了 <Main /> (这是路由器)。

我很困惑如何做到这一点，因为 App.js是所有组件的父组件。我对如何做到这一点(可能)的唯一想法是，当用户单击 <Link /> 时对于上述组件，我可以添加 setState (也许？)到App.js并将其更改为类似 hideAppComponents = true然后隐藏适当的组件。我知道在这种情况下我必须制作 <App /> extends Component因为它将是有状态的。

对于这样的用例有什么建议的方法吗？

Answer 1

就回答您的具体问题而言:是的，将状态添加到您的 App 中然后根据页面进行不同的渲染。

但是，对组件进行少量重构将使您的问题变得更容易。

在我看来，<app> 很好用在路由上下文中，只是用它来引用用户将要使用的路线。

<app>
  <main>
    <Switch>
      <Route exact path='/' component={Home}/>
      <Route exact path='/about' component={AboutUs}/>
      <Route path='/somePageWithoutAFooter' component={CoolPage}/>
    </Switch>
  </main>
</app>

现在，您已经从顶级应用程序中设置了一组最小的约束。根据路线，您将渲染特定的子组件。所以这解决了你的直接问题。现在您可以拥有CoolPage是它自己的定制的东西，但是Home页面可以做其他事情。

到目前为止，一切都很好。然而，我们可以说 Home和AboutUs具有与您一直在谈论的相同的页眉和子页脚的基本模板。不幸的是，这两个组件都必须在渲染器中描述这种架构。相反，您可以创建一个像这样的容器组件:

class MyLayout extends Component {
  render() {
    <div>    
      <Header />
      {this.props.children}
      <Footer />
      <Subfooter />
      <SubfooterLegal />
    </div>
  }
}

这个组件可以这样使用: <MyLayout><Home></MyLayout>

所以现在，您需要做的就是将所有正常页面包装在 MyLayout 中。 。这可以在 app 中完成本身，或者如果变得更复杂的话，也可以在 child 身上。

编辑:此示例使用 react-router因为这篇文章被标记了。如果需要，您可以遵循相同的原则而不使用路由器。它只是使 <Route>东西更容易管理。