React组件复用：如何封装重复的外层包裹代码实现逻辑复用？

方案1：封装公共布局组件（最推荐） #

你这个场景完全可以通过React原生的children插槽能力实现布局复用，操作成本最低、可维护性最高。

步骤1：抽离公共代码为独立布局组件 #

把两段重复的布局逻辑抽成单独组件，将变化的子组件位置用children占位即可：

// 新建CommonLayout.jsx
// 注意提前导入你用到的MaterialUI相关组件、主题、样式文件
import appTheme from '你的主题配置路径';
import classes from '你的样式文件路径';

export default function CommonLayout({ children }) {
  // 原两个组件中重复的业务逻辑（代码中...部分的公共逻辑）都可以放在这里

  return (
    <ThemeProvider theme={appTheme}>
      <div className={classes.root}>
        <CssBaseline />
        <AppBar >
          <Toolbar className={classes.toolbar}>
            {/* 原Header的公共代码 */}
          </Toolbar>
        </AppBar>
        <main className={classes.content}>
          <div className={classes.appBarSpacer} />
          <Container maxWidth="lg" className={classes.container}>
            <Grid container spacing={3}>
              <Grid item xs={12}>
                <Paper className={classes.paper}>
                  {/* 变化的子组件位置用children占位 */}
                  {children}
                </Paper>
              </Grid>
            </Grid>
          </Container>
        </main>
      </div>
    </ThemeProvider>
  );
}

步骤2：在业务场景直接调用 #

如果原两个组件没有独有逻辑，可以直接嵌套使用：

// 渲染MyComponent1的场景
<CommonLayout>
  <MyComponent1 />
</CommonLayout>

// 渲染MyComponent2的场景
<CommonLayout>
  <MyComponent2 />
</CommonLayout>

如果原两个组件还有各自独有的逻辑，简化后的代码如下：

// 原SameCodeToWrapComponent1简化后
import CommonLayout from './CommonLayout';
export default function SameCodeToWrapComponent1() {  
  // 组件1独有的业务逻辑写在这里
  return (
    <CommonLayout>
      <MyComponent1 />
    </CommonLayout>
  );
}

// 原SameCodeToWrapComponent2简化后
import CommonLayout from './CommonLayout';
export default function SameCodeToWrapComponent2() {  
  // 组件2独有的业务逻辑写在这里
  return (
    <CommonLayout>
      <MyComponent2 />
    </CommonLayout>
  );
}

其他可选方案 #

• 高阶组件（HOC）：如果需要给子组件注入公共props、或者需要批量给一批组件加统一布局，可选择高阶组件实现
• Render Props：如果子组件需要使用布局组件内部的状态、方法，可选择Render Props的方式传参实现

内容的提问来源于stack exchange，提问作者javaFE