Javascript 如何为react中的不同组件使用不同的标题

这是我的主

app.js

文件，包含所有路由。现在有两个

Header

组件。现在我需要使用

Header1

只有

MyProfile

和

Home

组件和

Header2

和

Marketing

。我怎样才能用最好的方法做到这一点

const App = (props) => (
  <Provider store={store}>
    <Layout>
      <Header1 {...props}/>
      <Header2 {...props}/>
      <Router>
        {/*<PrivateRoute path="/app/profile" component={Profile} />*/}   
        <Marketing path="/app" {...props}/>
        <PrivateRoute  path="/app/my-profile" component={MyProfile} location={props.location}/>
        <PrivateRoute  path="/app/home" component={Home} location={props.location}/>
      </Router>
    </Layout>
  </Provider>
)

export default App

const-App=（道具）=>(
{/**/}   
)
导出默认应用程序

解决问题的一个可能方法是，明确定义哪些组件需要在路由内呈现。但我认为这不是你能采取的最好的方法

<Route path='/app/my-profile' render={ props =>
  <>
    <Header1 {...props} />
    <MyProfile />
  </>
} />

} />

我想到的另一个解决方案是在MyProfile组件中包含头。在我看来，这是更优雅的方式。 因此，你的App.js将只包括路由路径，而你的组件将负责它们包括的内容：

const App = (props) => (
  <Provider store={store}>
    <Layout>
      <Router> 
        <Marketing path="/app" {...props}/>
        <PrivateRoute  path="/app/my-profile" component={MyProfile} location={props.location}/>
        <PrivateRoute  path="/app/home" component={Home} location={props.location}/>
      </Router>
    </Layout>
  </Provider>
)

export default App

const-App=（道具）=>(
)
导出默认应用程序

您的MyProfile组件可以如下所示：

const MyProfile = (props) => (
  <>
      <Header1 {...props}/>
      <p>This is my profile</p>
  </>
)

export default MyProfile

constmyprofile=（道具）=>(
这是我的个人资料

)
导出默认MyProfile

因此，从

应用程序

组件中删除标题，并将其呈现在所需的位置。我必须将

标题

作为父级而不是子级。这并不完全是父/子级组件的定义。根据路径或道具有条件地呈现其中一个标题，或者呈现一个标题，并对其视图应用有关解决方案后传递的道具的相关更改。我一定会考虑的。好吧，假设我的标题组件中有一个下拉列表，现在我需要将下拉列表的值传递到我的个人资料页面，我可以这样做，但是现在当我转到主页时，我需要保持标题下拉列表的相同阶段，我怎么做？