耀极客论坛

 找回密码
 立即注册
查看: 691|回复: 0

React插槽使用方法

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 00:53:18 | 显示全部楼层 |阅读模式
  本文主要介绍了React插槽使用方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

需求

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


核心思想

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

  核心代码
  1. // 015 使用插槽
  2. import React  from 'react';
  3. import ReactDOM from 'react-dom';
  4. // 父组件
  5. class ParentDom extends React.Component {
  6.     constructor(props) {
  7.         super(props)
  8.         this.state = {
  9.             heardData:"头部数据",
  10.             footData:"底部数据",
  11.             contentData:"内容数据"
  12.         }
  13.     }
  14.     componentDidMount() {
  15.     }
  16.     render() {
  17.         return (
  18.             ‹div>
  19.                 ‹h1>015使用插槽‹/h1>
  20.                 ‹ChildDom >
  21.                     ‹div data-position="heard" >这是头部‹/div>
  22.                     ‹div data-position="content" >这是内容 丨{this.state.contentData}‹/div>
  23.                     ‹div data-position="foot" >这是底部‹/div>
  24.                 ‹/ChildDom>
  25.             ‹/div>
  26.         )
  27.     }
  28. }
  29. // 子组件
  30. class ChildDom extends React.Component {        
  31.     constructor(props) {
  32.         super(props)  
  33.     }
  34.     render() {
  35.         let heard,content,foot;
  36.         this.props.children.forEach(item =>{
  37.             if(item.props['data-position'] == 'heard'){
  38.                 heard = item
  39.             }else if(item.props['data-position'] == 'content'){
  40.                 content = item
  41.             }else if(item.props['data-position'] == 'foot'){
  42.                 foot = item
  43.             }
  44.         })  
  45.         return (
  46.             ‹div >
  47.                 ‹p>我是子组件‹/p>
  48.                ‹div className="heard">
  49.                    {heard}
  50.                ‹/div>
  51.                ‹div className="content">
  52.                    {content}
  53.                ‹/div>
  54.                ‹div className="foot">
  55.                    {foot}
  56.                ‹/div>
  57.             ‹/div>
  58.         )
  59.     }
  60. }
  61. export default function () {
  62.     ReactDOM.render(
  63.         ‹ParentDom />,
  64.         document.querySelector("#example15")
  65.     );
  66. }
复制代码
  展示效果



React实现插槽的两种方式
  由于在React组件中写的内容会被挂载到props中,以此来实现类似vue中的插槽功能
  这是最外层代码
  1. import React, { Component } from 'react'
  2. import NavBar from './NavBar'
  3. import NavBar2 from './NavBar2'
  4. export default class App extends Component {
  5.   render() {
  6.     return (
  7.       ‹div>
  8.         ‹NavBar>
  9.           ‹span>aaa‹/span>
  10.           ‹strong>bbb‹/strong>
  11.           ‹a href="/#" rel="external nofollow"  rel="external nofollow" >ccc‹/a>
  12.         ‹/NavBar>
  13.         ‹NavBar2 leftslot={‹span>aaa‹/span>}
  14.         centerslot={‹strong>bbb‹/strong>}
  15.         rightslot={‹a href="/#" rel="external nofollow"  rel="external nofollow" >ccc‹/a>}/>
  16.       ‹/div>
  17.     )
  18.   }
  19. }
复制代码
  1.用this.props.children[index]
  1. import React, { Component } from 'react'
  2. import './style.css'
  3. export default class NavBar extends Component {
  4.   render () {
  5.     return (
  6.       ‹div className="nav-bar">
  7.         ‹div className="nav-left">
  8.           {this.props.children[0]}
  9.         ‹/div>
  10.         ‹div className="nav-center">
  11.           {this.props.children[1]}
  12.         ‹/div>
  13.         ‹div className="nav-right">
  14.           {this.props.children[2]}
  15.         ‹/div>
  16.       ‹/div>
  17.     )
  18.   }
  19. }
复制代码
  2.用直接命名方式
  1. import React, { Component } from 'react'
  2. import './style.css'
  3. export default class NavBar extends Component {
  4.   render () {
  5.     const {leftslot, centerslot,rightslot} = this.props
  6.     return (
  7.       ‹div className="nav-bar">
  8.         ‹div className="nav-left">
  9.           {leftslot}
  10.         ‹/div>
  11.         ‹div className="nav-center">
  12.           {centerslot}
  13.         ‹/div>
  14.         ‹div className="nav-right">
  15.           {rightslot}
  16.         ‹/div>
  17.       ‹/div>
  18.     )
  19.   }
  20. }
复制代码
  到此这篇关于React插槽使用方法的文章就介绍到这了,更多相关React插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 20:11 , Processed in 0.069633 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表