我有一个<App/>组件，它使任何网页上我的网站：隐藏应用元素反应

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

我现在遇到的问题是，我有一个组件（页），不包括任何除了<Main />（这是路由器）之外的组件<App />之内。

我很困惑如何做到这一点，因为App.js是所有组件的父组件。我唯一的想法是，当用户点击上述组件的<Link />时，我可以将setState（也许？）添加到App.js，并将其更改为hideAppComponents = true之类的内容，然后隐藏相应的组件。我知道在这种情况下，我将不得不使<App />extends Component，因为它然后是有状态的。

是否有像这样的用例的建议方法？

来源

2017-07-24 SamYoungNY

至于回答您的具体问题：是的，增加国家对你的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本身完成，也可以在孩子变得更复杂的情况下完成。

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

来源

2017-07-24 16:49:09 AnilRedshift

谢谢这是有帮助的，但想过去看看我是否正确理解。目前，'App.js'包含布局，'Main.js'包含布线。你在说'App.js'应该包含路由，'MyLayout.js'应该包含布局。然后 - 当我想用布局封装一个页面时，我为它创建一个组件，例如'AboutUs.js' - 导入'MyLayout.js'并包装'AboutUs'组件，如下所示：'

这是About Page

'......这是否符合你的意思？ – SamYoungNY

我想说的是，在''渲染功能将包括此： '' 等它并没有在那里，当然，但它是最简单的，IMO – AnilRedshift

是我使用这个，它的工作表示感谢 – SamYoungNY

唯一可行的解决方案我可以认为，除了你的解决方案是使用loaction prop。以下是您可以尝试的示例代码。

import STORE from './store/STORE'; 
import {Provider} from 'react-redux'; 
import {Route, Router} from 'react-router-dom'; 
import createHashHistory from 'history/createHashHistory'; 

const history = createHashHistory(); 
render(
    <Provider store={STORE}> 
     <Router history={history}> 
      <Route path="/" component={App}/> 
     </Router> 
    </Provider>, document.getElementById('app') 
); 


const App = (location) => (
    location.pathname.includes("error") ? 
    <div>  
    <Main /> 
    </div> : 
    <div>  
    <Header /> 
    <Main /> 
    <Footer /> 
    <Subfooter /> 
    <SubfooterLegal /> 
    </div> 
) 
export default App;

来源

2017-07-24 16:44:27

隐藏应用元素反应

回答

这是About Page

相关问题