一、React插槽的概念
插槽是一种让组件变得更加灵活和可复用的技术。它允许我们在组件内部预留一些位置,然后在组件使用时填充这些位置,实现外部内容的嵌套。
二、实现React插槽的方法
在React中,实现插槽可以通过两种方式:props
传递和children
属性。
1. 通过props传递:
这是一种最简单的插槽实现方式,父组件通过props将内容传递给子组件。
示例:
import React from 'react';
function Card(props) {
return (
<div className="card">
{props.header}
</div>
);
}
function App() {
return (
<Card header={<h2>Title</h2>} />
);
}
2. 使用children
属性:
React组件有一个特殊的children
属性,它可以用于访问组件的嵌套内容。
示例:
import React from 'react';
function Card(props) {
return (
<div className="card">
<div className="content">
{props.children}
</div>
</div>
);
}
function App() {
return (
<Card>
<p>Card content here.</p>
</Card>
);
}
注意:若是传递多个元素,children则为数组类型
import React from 'react';
function Card(props) {
return (
<div className="card">
<div className="content">
{props.children[0]}
{props.children[1]}
</div>
//或者可以直接写props.children
<div className="content">
{props.children}
</div>
</div>
);
}
function App() {
return (
<Card>
<p>Card content here.</p>
<span>Else content</span>
</Card>
);
}
三、作用域插槽
React实现作用域插槽还是使用props传值,只不过是要传递一个回调函数用来接收参数。
示例:
import React from 'react';
function Card(props) {
return (
<div className="card">
{props.setHeader("CardHeader")}
</div>
);
}
function App() {
return (
<Card setHeader={text => <p>{text}</p>} />
);
}