一文詳解如何React中實(shí)現(xiàn)插槽

更新時(shí)間：2023年03月27日 11:35:22 作者：_聰明勇敢有力氣

這篇文章主要為大家詳細(xì)介紹了如何在React中實(shí)現(xiàn)插槽，文中的示例代碼講解詳細(xì)，對(duì)我們的學(xué)習(xí)或工作具有一定的借鑒價(jià)值，需要的可以了解一下

React中實(shí)現(xiàn)插槽

設(shè)計(jì)插槽

在React中實(shí)現(xiàn)插槽需要我們自己來(lái)實(shí)現(xiàn) 主要用到props.children

我們以跟組件作為父組件

創(chuàng)建子組件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="我是標(biāo)題" 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是什么

如果我們要控制每個(gè)位置渲染不一樣的插槽內(nèi)容

方式一是使用數(shù)組的形式但是無(wú)法保證每次傳入的都是多個(gè)插槽值

這時(shí)需要使用React.Children 對(duì)象中提供的額外方法對(duì)props.children做處理：其上有count\forEach\map\toArray等方法

在這些方法內(nèi)部已經(jīng)對(duì)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;

具名插槽

當(dāng)我們?cè)诟附M件中對(duì)要插入的內(nèi)容設(shè)置上名字后想要依據(jù)不同的名字渲染在不同的位置并且順序也不同時(shí) 我們可以采用具名插槽的方式

這里我們?cè)O(shè)置了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="我是標(biāo)題" x={10}>
			<span slot='footer' >哈哈哈</span>
			<span slot='header' >呵呵呵</span>
		</DemoOne>
		<DemoOne title="嘿嘿嘿">
			<span>嘿嘿嘿</span>
		</DemoOne>
		<DemoOne title="哈哈哈" />
	</>
);

我們可以先使用React.Children.toArray() 將children都變?yōu)閿?shù)組形式

因?yàn)閭鬟f進(jìn)來(lái)的插槽信息都是編譯為virtualDOM后傳遞進(jìn)來(lái)的而不是傳遞的標(biāo)簽

所以我們可以直接通過(guò).語(yǔ)法來(lái)獲取到props對(duì)象的slot屬性

這里定義三個(gè)數(shù)組用來(lái)存放 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) => {
		//傳遞進(jìn)來(lái)的插槽信息 都是編譯為virtualDOM后傳遞進(jìn)來(lái)的 而不是傳遞的標(biāo)簽
		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;