While I was working on a React.js side project using Semantic UI React as a UI library, I noticed that its components are written in a way that reminds me of Vue.js components I write.

当我使用语义UI React作为UI库进行React.js端项目时，我注意到其组件的编写方式使我想起了我编写的Vue.js组件。

If you’ve been writing Vue.js web apps or you took a tour at their documentations, you probably know slots. If not, then let me take you on my tour through this article.

如果您一直在编写Vue.js网络应用程序，或者浏览了他们的文档，那么您可能知道插槽。 如果没有，那么让我带您浏览这篇文章。

什么是Vue插槽？ (What are Vue Slots?)

Vue implements a content distribution API inspired by the Web Components spec draft, using the <slot> element to serve as distribution outlets for content.

Vue使用<slot>元素作为内容的分发渠道，实现了受Web组件规范草案启发的内容分发API。

Let’s take an example. If you want to pass a DOM into a child component, we can do the following:

让我们举个例子。 如果要将DOM传递到子组件中，我们可以执行以下操作：

<navigation-link url="/profile">
  Your Profile
</navigation-link>

then in the component of navigation-link, you might have

然后在navigation-link组件中，您可能有

<a 
  :href="url"
  class="nav-link"
>
   <slot></slot>
</a>

When the component renders, <slot></slot> will be replaced by “Your Profile”.

渲染组件后， <slot></slot>将被“您的配置文件”替换。

You may wonder and tell yourself where is the difference? It’s doable, and I can access my DOM elements via props.children

您可能想知道并告诉自己区别在哪里？ 这是可行的，并且我可以通过props.children访问我的DOM元素

Okay, you’re right you can do this, but there’s a cool feature called named slots that you don’t know about. Let’s find out what it is.

好的，您可以执行此操作，但是您不知道有一个很酷的功能，称为命名插槽 。 让我们找出它是什么。

Vue命名插槽 (Vue Named Slots)

There are times when it’s useful to have multiple slots. For example, in a <default-layout> component with the following structure:

有时候拥有多个插槽很有用。 例如，在具有以下结构的<default-layout>组件中：

We need to pass a piece of code to every slot. For example, the header slot will be replaced with <NavbarComponent /> and so on with the rest of the slots.

我们需要向每个插槽传递一段代码。 例如，标头插槽将由<NavbarComponent />替换，其余的插槽依此类推。

To provide content to these slots to v-slot directive on a <template> like the following snippet:

要将内容提供给<template>上的v-slot指令的这些插槽，如下所示：

Now, everything inside <template> elements will be passed to the corresponding slots. Cool right?

现在， <template>元素内的所有内容都将传递到相应的插槽。 酷吧？

The question that is running on your mind now is How can I do that in React? Let’s take a look at how we could do it in React

您现在想到的问题是我该如何在React中做到这一点？ 让我们看看如何在React中做到这一点

Since props.children is an array of elements, we can implement this cool feature in React by using Array.prototype.find like this:

由于props.children是一个元素数组，因此我们可以通过使用Array.prototype.find在React中实现此酷功能，如下所示：

If you use class-based components it’ll be like this:

如果您使用基于类的组件，它将像这样：

So, we’ve just implemented or slots. Let’s use them

因此，我们刚刚实现了或插槽。 让我们使用它们

Now your React components are more readable. Happy Hacking! 🎉🍻

现在，您的React组件更具可读性。 快乐黑客！ 🎉🍻