React 让组件更可重用

Question

我为我的项目创建了一个页眉和样式，每个页面都将共享这些组件。

结构是：

<MuiThemeProvider theme={theme}>
    <div className="app-horizontal collapsed-sidebar">
        {/* SideBar Here */}
        <div className="app-container">
            <div className="rct-page-wrapper">
                <div className="rct-app-content">
                    <Header />
                </div>
                <div className="rct-page">
                    <HorizontalMenu />
                    <Scrollbars
                        className="rct-scroll"
                        autoHide
                        autoHideDuration={100}
                        style={getScrollBarStyle()}
                    >
                        <Content />
                    </Scrollbars>
                </div>
            </div>
        </div>
    </div>
</MuiThemeProvider>

基本上我有：

• 包含标题组件的标题文件夹。带有 has 的主文件夹 Home.js 是代码所在，Content.js 是我渲染 Home 内容的地方 在<div className="rct-page"> 的内部<Content />。
• Users 文件夹与 Home 相同，但将 <Content /> 更改为 用户的内容。
• Properties 文件夹与 Home 相同，但正在更改 <Content /> 到 Properties` 内容
• 等等。

如您所见，对于我的项目导航到的每个页面，我都在重复上面代码的相同结构，但更改了<Content />。我认为这不是一个好方法。有没有办法让我的代码更可重用？

谢谢

Answer 1

我误读了您的示例代码，并认为它是标题组件本身。实际上，您可能需要的只是更改开关的位置。

如果您共享的示例对于应用程序的每个页面都完全相同，那么最好将其视为应用程序根：

<MuiThemeProvider theme={theme}>
    <div className="app-horizontal collapsed-sidebar">
        {/* SideBar Here */}
        <div className="app-container">
            <div className="rct-page-wrapper">
                <div className="rct-app-content">
                    <Header />
                </div>
                <div className="rct-page">
                    <HorizontalMenu />
                    <Scrollbars
                        className="rct-scroll"
                        autoHide
                        autoHideDuration={100}
                        style={getScrollBarStyle()}
                    >
                        <Switch>
                          <Route exact path="/" component={HomeContent}/>
                          <Route exact path="/users" component={UsersContent}/>
                          ...
                        </Switch>
                    </Scrollbars>
                </div>
            </div>
        </div>
    </div>
</MuiThemeProvider>

我不知道Navigation.js 在您的原始代码中做了什么。如果它是具有副作用或其他行为的组件，您不想污染根组件，则可以将其替换为上面的开关。