React如何实现插槽

​ 新入职的实习单位有React的项目，后面可能要写。在初学react的过程中觉得对比vue学习会上手得更快。今天突然想到的问题是React如何实现类似Vue的插槽效果。下面是个人总结。

一、插槽的概念

插槽是一种让组件变得更加灵活和可复用的技术。它允许我们在组件内部预留一些位置，然后在组件使用时填充这些位置，实现外部内容的嵌套。

二、实现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>} />
  );
}