我要评论目标实现一个支持动态注册内容的插槽组件，思路：提供一个 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 (
<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]);
}三、将插槽内的注册的内容渲染到 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 (
<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>
);
到此这篇关于react实现一个支持动态插槽的layout组件的文章就介绍到这了,更多相关react动态插槽组件内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论