一文详解如何React中实现插槽
作者：_聪明勇敢有力气
这篇文章主要为大家详细介绍了如何在React中实现插槽，文中的示例代码讲解详细，对我们的学习或工作具有一定的借鉴价值，需要的可以了解一下
React中实现插槽
设计插槽
在React中实现插槽需要我们自己来实现 主要用到props.children
我们以跟组件作为父组件
创建子组件DemoOne组件
import React from "react";
import ReactDOM from "react-dom/client";
import DemoOne from "./views/DemoOne";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<>
<DemoOne title="我是标题" x={10}>
<span>哈哈哈</span>
<span>呵呵呵</span>
</DemoOne>
<DemoOne title="嘿嘿嘿">
<span>嘿嘿嘿</span>
</DemoOne>
<DemoOne title="哈哈哈" />
</>
);
import React from "react";
const DemoOne = function DemoOne(props) {
let {title, x, children } = props;
console.log(children);
return (
<div className="demo-BOX">
{children}
</div>
);
};
DemoOne.propTypes = {
title: PropTypes.string.isRequired,
x: PropTypes.number,
y: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
};
export default DemoOne;
这里我们引入了三次子组件
我们先看看子组件中返回的children是什么
如果我们要控制每个位置渲染不一样的插槽内容
方式一 是使用数组的形式 但是无法保证每次传入的都是多个插槽值
这时需要使用React.Children 对象中提供的额外方法 对props.children做处理： 其上有count\forEach\map\toArray等方法
在这些方法内部 已经对children做了各种形式的处理
我们可以直接使用
import React from "react";
const DemoOne = function DemoOne(props) {
let { title, x, children } = props;
if (!children) {
children = [];
} else if (!Array.isArray(children)) {
children = [children];
}
console.log(children);
return (
<div className="demo-BOX">
{children[0]}
{children[1]}
</div>
);
};
export default DemoOne;
具名插槽
当我们在父组件中对要插入的内容设置上名字后 想要依据不同的名字 渲染在不同的位置 并且顺序也不同时 我们可以采用具名插槽的方式
这里我们设置了footer与header
import React from "react";
import ReactDOM from "react-dom/client";
import DemoOne from "./views/DemoOne";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<>
<DemoOne title="我是标题" x={10}>
<span slot='footer' >哈哈哈</span>
<span slot='header' >呵呵呵</span>
</DemoOne>
<DemoOne title="嘿嘿嘿">
<span>嘿嘿嘿</span>
</DemoOne>
<DemoOne title="哈哈哈" />
</>
);
我们可以先使用React.Children.toArray() 将children都变为数组形式
因为传递进来的插槽信息 都是编译为virtualDOM后传递进来的 而不是传递的标签
所以我们可以直接通过.语法来获取到props对象的slot属性
这里定义三个数组用来存放 header footer 与 default
import React from "react";
const DemoOne = function DemoOne(props) {
let { title, x, children } = props;
children = React.Children.toArray(children);
let headerSlot = [],
footerSlot = [],
defaultSlot = [];
children.forEach((child) => {
//传递进来的插槽信息 都是编译为virtualDOM后传递进来的 而不是传递的标签
let { slot } = child.props;
if (slot === "header") {
headerSlot.push(child);
} else if (slot === "footer") {
footerSlot.push(child);
} else {
defaultSlot.push(child);
}
});
return (
<div className="demo-BOX">
{headerSlot}
<br />
<h2 className="title">{title}</h2>
<span>{x}</span>
<br />
{footerSlot}
</div>
);
};
export default DemoOne;
到此这篇关于一文详解如何React中实现插槽的文章就介绍到这了,更多相关React插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！