React 让组件更可重用

Posted 2023-02-22

【中文标题】React 让组件更可重用

【英文标题】：React make component more reusable

【发布时间】：2021-08-14 03:29:24

【问题描述】：

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

结构是：

<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 />。我认为这不是一个好方法。有没有办法让我的代码更可重用？

谢谢

【问题讨论】：

查看 composition 和 this thread 上的 React 文档。您可以将<Content/> 替换为props.children，并将标题组件包裹在您希望包含的任何其他组件周围。

@lawrence-witt 谢谢。你能给我举个例子吗？我所有的组件都在 Navigation.js 中，我在其中管理 <Route exact path="/users" component=Users /> 等路由器。我如何将标题包装在用户组件中？

您似乎已将标题组件和布局与页面组件和布局耦合。我强烈建议将标题与页面内容分离，因为这将允许您通过路由器在您想要的所有路由上呈现标题，并且页面可以独立匹配。

【参考方案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 在您的原始代码中做了什么。如果它是具有副作用或其他行为的组件，您不想污染根组件，则可以将其替换为上面的开关。

【讨论】：

谢谢。你的第一个答案是完美的。我将所有MuiThemeProvider 移动到一个带有props.children 而不是<Content /> 的Main.js 组件。然后我在其他组件中将其称为<Main><h2>EXAMPLE</h2></Main>