脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React插槽

React插槽使用方法

 更新时间：2021年12月17日 15:44:01   作者：有趣的老凌  
本文主要介绍了React插槽使用方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

需求

我们自己写了个组件，引用组件时想要在组件中写入内容，并且写入的内容可以被组件识别、控制，用过Vue的同学肯定会立刻想到slot插槽，react也支持插槽功能，下面我们用react开发一个支持插槽功能的组件。

核心思想

父组件在子组件中传入的三个div，这三个div会默认通过props传到子组件中，然后我们在子组件中控制children的渲染即可。

核心代码

// 015 使用插槽
import React  from 'react';
import ReactDOM from 'react-dom';
// 父组件
class ParentDom extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            heardData:"头部数据",
            footData:"底部数据",
            contentData:"内容数据"
        }
    }
    componentDidMount() {
    }

    render() {
        return (
            <div>
                <h1>015使用插槽</h1>
                <ChildDom >
                    <div data-position="heard" >这是头部</div>
                    <div data-position="content" >这是内容 丨{this.state.contentData}</div>
                    <div data-position="foot" >这是底部</div>
                </ChildDom>
            </div>
        )
    }
}
// 子组件
class ChildDom extends React.Component {        
    constructor(props) {
        super(props)  
    }
    render() {
        let heard,content,foot;
        this.props.children.forEach(item =>{
            if(item.props['data-position'] == 'heard'){
                heard = item
            }else if(item.props['data-position'] == 'content'){
                content = item
            }else if(item.props['data-position'] == 'foot'){
                foot = item
            }
        })  
        return (
            <div >
                <p>我是子组件</p>
               <div className="heard">
                   {heard}
               </div>
               <div className="content">
                   {content}
               </div>
               <div className="foot">
                   {foot}
               </div>
            </div>
        )
    }
}

export default function () {
    ReactDOM.render(
        <ParentDom />,
        document.querySelector("#example15")
    );
}

展示效果

React实现插槽的两种方式

由于在React组件中写的内容会被挂载到props中，以此来实现类似vue中的插槽功能

这是最外层代码

import React, { Component } from 'react'
import NavBar from './NavBar'
import NavBar2 from './NavBar2'

export default class App extends Component {
  render() {
    return (
      <div>
        <NavBar>
          <span>aaa</span>
          <strong>bbb</strong>
          <a href="/#" rel="external nofollow"  rel="external nofollow" >ccc</a>
        </NavBar>

        <NavBar2 leftslot={<span>aaa</span>}
        centerslot={<strong>bbb</strong>}
        rightslot={<a href="/#" rel="external nofollow"  rel="external nofollow" >ccc</a>}/>
      </div>
    )
  }
}

1.用this.props.children[index]

import React, { Component } from 'react'

import './style.css'
export default class NavBar extends Component {
  render () {
    return (
      <div className="nav-bar">
        <div className="nav-left">
          {this.props.children[0]}
        </div>
        <div className="nav-center">
          {this.props.children[1]}
        </div>
        <div className="nav-right">
          {this.props.children[2]}
        </div>
      </div>
    )
  }
}

2.用直接命名方式

import React, { Component } from 'react'

import './style.css'
export default class NavBar extends Component {
  render () {
    const {leftslot, centerslot,rightslot} = this.props
    return (
      <div className="nav-bar">
        <div className="nav-left">
          {leftslot}
        </div>
        <div className="nav-center">
          {centerslot}
        </div>
        <div className="nav-right">
          {rightslot}
        </div>
      </div>
    )
  }
}

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

您可能感兴趣的文章:

相关文章

  • React封装CustomSelect组件思路详解

    React封装CustomSelect组件思路详解

    小编需要封装一个通过Popover弹出框里可以自定义渲染内容的组件，渲染内容暂时有: 单选框, 复选框，接下来通过本文给大家分享React封装CustomSelect组件思路,需要的朋友可以参考下
    2022-07-07
  • React的生命周期详解

    React的生命周期详解

    React是用于构建用户界面的JavaScript库。本文详细讲解了React的生命周期，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • React Context与setState详解使用方法

    React Context与setState详解使用方法

    Context提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传递的方法。在一个典型的 React 应用中，数据是通过props属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的
    2022-11-11
  • React中如何使用scss

    React中如何使用scss

    这篇文章主要介绍了React中如何使用scss问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • 详解react阻止无效重渲染的多种方式

    详解react阻止无效重渲染的多种方式

    这篇文章主要介绍了详解react阻止无效重渲染的多种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • react+redux仿微信聊天界面

    react+redux仿微信聊天界面

    这篇文章主要介绍了react+redux仿微信聊天IM实例|react仿微信界面 ，本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • React-Hooks之useImperativeHandler使用介绍

    React-Hooks之useImperativeHandler使用介绍

    这篇文章主要为大家介绍了React-Hooks之useImperativeHandler使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • Ant Design 组件库之步骤条实现

    Ant Design 组件库之步骤条实现

    这篇文章主要为大家介绍了Ant Design组件库之步骤条实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • React和Vue的props验证示例详解

    React和Vue的props验证示例详解

    这篇文章主要介绍了React和Vue的props验证,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-08-08
  • 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    这篇文章主要介绍了使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果的相关资料,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2016-10-10

最新评论