React利用props的children实现插槽功能

可能会比较遗憾的说 React中并没有vue中的 slot 插槽概念 不过 可以通过props.children 实现类似功能

我们先创建一个React项目

在src下创建目录components 在下面创建一个dom.jsx组件

参考代码如下

import React from "react"
export default class dom extends React.Component {
    constructor(props){
      super(props);
      this.state = {
      }
    }
    render(){
      return (
        <div>
           <div>这里是dom组件</div>
           <div>{ this.props.children }</div>
           <div>元素结束</div>
        </div>
      )
    }
}

这里 大家可以将this.props.children 理解为我们vue中的slot父组件插入的内容就会放在这个位置

我们 App根组件编写代码如下

import React from "react"
import Dom from "./components/dom"
export default class App extends React.Component {
    constructor(props){
      super(props);
      this.state = {
      }
    }
    render(){
      return (
        <div>
           <Dom>
              <div>这是插槽内容</div>
           </Dom>
        </div>
      )
    }
}

我们正常调用了刚才写的dom组件 在中间插入了一个div 内容为 这是插槽内容

我们运行结果如下

可以看到 我们的内容被成功插入在了 this.props.children 的位置

知识补充

可能有小伙伴对于props.children并不太熟悉，下面小编为大家整理了props.children的相关知识，希望对大家有所帮助

简介

在典型的React数据流模型中，props 是组件对外的接口。props 作为父子组件沟通的桥梁，为组件的通信和传值提供了重要手段。

this.props 对象的属性与组件的属性一一对应，但其中有一个比较特殊的参数：this.props.children。它表示组件所有的子节点。

在组件内部使用 this.props.children，可以拿到用户在组件里面放置的内容。

如下例，一个 span 标签在 Parent 中作为Child的子节点传入，可在 Child 中通过 this.props.children 取到：

class Parent extends React.Component {
  render() {
    return (
    <Child>
        <span>{'child node'}</span>
      </Child>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

React.Children 方法

React 提供了工具方法 React.Children 来处理 this.props.children。

1. React.Children.map

object React.Children.map(object children, function fn)

遍历 props.children ，在每一个子节点上调用 fn 函数。

2. React.Children.forEach

React.Children.forEach(object children, function fn)

类似于 React.Children.map()，但是不返回对象。

3. React.Children.count

number React.Children.count(object children)

返回 children 当中的组件总数。

4. React.Children.only

object React.Children.only(object children)

返回 children 中仅有的子节点。如果在 props.children 传入多个子节点，将会抛出异常。

到此这篇关于React利用props的children实现插槽功能的文章就介绍到这了,更多相关React插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论