React實現(xiàn)一個支持動態(tài)插槽的Layout組件

更新時間：2025年02月05日 10:25:58 作者：小烏龜快跑

這篇文章主要為大家詳細介紹了如何使用React實現(xiàn)一個支持動態(tài)注冊內(nèi)容的插槽組件,文中的示例代碼簡潔易懂,有需要的小伙伴可以了解一下

思路

采用 Context 實現(xiàn)插槽的注冊和管理，并提供對應(yīng)的渲染。
采用自定義Hook 將往插槽注冊內(nèi)容邏輯抽離封裝
提供對應(yīng)的渲染器將插槽內(nèi)容掛載到React組件樹上

代碼實現(xiàn)

一、定義 Context

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: [],
  });

// 定義注冊函數(shù)
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

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]);
}

三、將插槽內(nèi)的注冊的內(nèi)容渲染到 React 組件樹上

渲染器可以根據(jù)自定義處理內(nèi)容進行處理，如果您想讓插槽注冊的內(nèi)容按照優(yōu)先級進行排序，修改注冊的內(nèi)容（標記優(yōu)先級），渲染器中使用優(yōu)先級字段進行排序然后渲染。以下只是一個簡單的渲染實現(xiàn)：

// 
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>
  );
};

/* 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;
}

掛載

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>
);