目录

• 思路
• 代码实现
• 一、定义 Context
• 二、封装 useSlotRegister 自定义 Hook
• 三、将插槽内的注册的内容渲染到 React 组件树上

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

思路

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

代码实现

一、定义 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: [],
  });

// 定义注册函数
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 (
    
      {children}
    
  );
};

二、封装 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]);
}

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

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

// 
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 (
    
      {/* render header */}
      

        

          
        
        
{children}
        

          
        
      
    
  );
};

/* 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",
    

      
Header
    
  );

  return null;
};

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

root.render(
  
    
      
      
      
Layout... main
    
  
);

到此这篇关于React实现一个支持动态插槽的Layout组件的文章就介绍到这了,更多相关React动态插槽组件内容请搜索科站长以前的文章或继续浏览下面的相关文章希望大家以后多多支持科站长！