React 设计实现一个支持动态插槽的Layout组件

目标实现一个支持动态注册内容的插槽组件,思路:提供一个 Context,维护插槽中注册的内容,并将其渲染到对应的位置。

思路

  • 采用 Context 实现插槽的注册和管理,并提供对应的渲染。
  • 采用自定义Hook 将往插槽注册内容逻辑抽离封装
  • 提供对应的渲染器将插槽内容挂载到React组件树上

代码实现

一、定义 Context

jsx 复制代码
import React, { createContext, useState } from "react";

export const SlotContext = createContext({
  slots: {
    header: [],
    footer: [],
  },
  registerSlot: (name: "header" | "footer", content: React.ReactNode) => undefined,
});

const SlotProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const [slots, setSlots] = useState<{
    header: React.ReactNode[];
    footer: React.ReactNode[];
  }>({
    header: [],
    footer: [],
  });

// 定义注册函数
const register = (name: "header" | "footer", content: React.ReactNode) => {
    setSlots((pre) => {
      const newValue = { ...pre };
      if (newValue[name]) {
        newValue[name] = [content];
        return newValue;
      } else {
        return pre;
      }
    });
  };

  return (
    <SlotContext.Provider value={{ slots, registerSlot: register }}>
      {children}
    </SlotContext.Provider>
  );
};

二、封装 useSlotRegister 自定义 Hook

jsx 复制代码
export function useSlotRegister(
  name: "header" | "footer",
  content: React.ReactNode
) {
  const { registerSlot } = React.useContext(SlotContext);

  React.useEffect(() => {
    registerSlot(name, content);

    // 清除
    return () => {
      registerSlot(name, null);
    };
  }, [name, content]);
}

三、将插槽内的注册的内容渲染到 React 组件树上

渲染器可以根据自定义处理内容进行处理,如果您想让插槽注册的内容按照优先级进行排序,修改注册的内容(标记优先级),渲染器中使用优先级字段进行排序然后渲染。以下只是一个简单的渲染实现:

jsx 复制代码
// 
export const HeaderSlotRenderer: React.FC = () => {
  const { slots } = React.useContext(SlotContext);

  return <>{slots.header}</>;
};

export const FooterSlotRenderer = () => {
  const { slots } = React.useContext(SlotContext);
  return <>{slots.footer}</>;
};

export const Layout: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  return (
    <SlotProvider>
      {/* render header */}
      <div className="layout">
        <div className="header">
          <HeaderSlotRenderer />
        </div>
        <div className="main">{children}</div>
        <div className="footer">
          <FooterSlotRenderer />
        </div>
      </div>
    </SlotProvider>
  );
};
css 复制代码
/* src/components/Layout.css */
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  height: 100px;
  background-color: #333;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  flex: 1;
  background-color: #f4f4f4;
  padding: 20px;
}

.footer {
  height: 80px;
  background-color: #333;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

挂载

jsx 复制代码
import ReactDOM from "react-dom/client";
import { Layout, SlotContext, useSlotRegister } from "./Layout";

const rootElement = document.getElementById("root")!;
const root = ReactDOM.createRoot(rootElement);

const HeaderTitle = () => {
  const { registerSlot } = React.useContext(SlotContext);

  // 手动 Register
  registerSlot(
    "header",
    <div>
      <h1>Header</h1>
    </div>
  );

  return null;
};

const FooterDate = () => {
  // use hook Register
  useSlotRegister("footer", <div>@2025</div>);
  return null;
};

root.render(
  <React.StrictMode>
    <Layout>
      <HeaderTitle />
      <FooterDate />
      <div>Layout... main</div>
    </Layout>
  </React.StrictMode>
);
相关推荐
Carlos_sam30 分钟前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴85041 分钟前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏1 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6662 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞3 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀3 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架