Question

我有一个Condition组件可以呈现我网站上的任何页面：

word_bank = {'one':1,'two':2,'three':3}
item = word_bank.pop(random.choice(list(word_bank.keys())))
print(list(word_bank.keys()))
print("The Word is: ", item)
print("=" * 25)
a = input("Do You Know It? (y/n):\t")
answer = item

我现在遇到的问题是我有一个组件（页面）除了<App/>（路由器）之外不包括const App = () => ( <div> <Header /> <Main /> <Footer /> <Subfooter /> <SubfooterLegal /> </div> ) export default App;中的任何组件。

我对如何执行此操作感到困惑，因为<App />是所有组件的父组件。关于如何执行此操作（可能）的唯一想法是，当用户单击<Main />上述组件时，我可以将App.js（可能是？）添加到<Link />并将其更改为像setState这样的东西，然后隐藏适当的组件。我知道在这种情况下，我必须制作App.js hideAppComponents = true，因为它会有状态。

对于像这样的用例，是否有任何建议的方法？

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本身完成，也可以在子项中完成，如果它变得更复杂。

修改：此示例使用react-router，因为此帖子已标记为该帖子。如果需要，您可以遵循相同的原则而不使用路由器。它只会使<Route>内容更容易管理。

Answer 2

除了你的解决方案之外我能想到的唯一可能的解决方案是使用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;

隐藏应用元素反应

2 个答案: