使用react context 实现vue插槽slot功能
前端 / 管理员 发布于 5年前 222
- 详解vue2.6插槽更新v-slot用法总结
- vue中slot（插槽）的介绍与使用
- Vue作用域插槽slot-scope实例代码
- 详解vue slot插槽的使用方法
首先来看下vue的slot的实现
提供内容渲染的组件
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
最终会渲染出已下架结构
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
言归正传，怎样使用react的context实现vue的这一功能呢
1 首先确认下layout组件的结构
import React, { Component } from 'react';import SlotProvider from './SlotProvider'import Slot from './Slot'class AppLayout extends Component { static displayName = 'AppLayout' render () { return () }}export default SlotProvider(AppLayout) 2 对此结构输出具体内容的组件
import React, { Component } from 'react';import AppLayout from './AppLayout'import AddOn from './AddOn'export default class App extends Component { render() { return (这里可能是一个页面标题
主要内容的一个段落。
另一个段落。
这里有一些联系信息
) }}3 其中AddOn类似于上面vue的template，所以下面来实现这个简单的只是用来提供slot标识和children内容的组件AddOn的实现
import React from 'react';import PropTypes from 'prop-types'const AddOn = () => nullAddOn.propTypes = { slot: PropTypes.string }AddOn.defaultTypes = { slot: '$$default' }AddOn.displayName = 'AddOn'export default AddOn4 Slot组件
import React from 'react';import { SlotContext } from './SlotProvider'import PropTypes from 'prop-types'const Slot = ({ name, children }) => { return ({(value) => { const addOnRenderer = value.requestAddOnRenderer(name) return (addOnRenderer && addOnRenderer()) || children || null }} )}Slot.displayName = 'Slot'Slot.propTypes = { name: PropTypes.string }Slot.defaultProps = { name: '$$default' }export default Slot5 接下来就是对Slot进行解析的HOC SlotProvider组件了
import React, { Component } from 'react';function getDisplayName(component) { return component.displayName || component.name || 'component'}export const SlotContext = React.createContext({ requestAddOnRenderer: () => { }})const SlotProviderHoC = (WrappedComponent) => { return class extends Component { static displayName = `SlotProvider(${getDisplayName(WrappedComponent)})` // 用于缓存每个的内容 addOnRenderers = {} requestAddOnRenderer = (name) => { if (!this.addOnRenderers[name]) { return undefined } return () => ( this.addOnRenderers[name] ) } render() { const { children, ...restProps } = this.props if (children) { // 以k-v的方式缓存的内容 const arr = React.Children.toArray(children) const nameChecked = [] this.addOnRenderers = {} arr.forEach(item => { const itemType = item.type console.log('itemType',itemType) if (item.type.displayName === 'AddOn') { const slotName = item.props.slot || '$$default' // 确保内容唯一性 if (nameChecked.findIndex(item => item === slotName) !== -1) { throw new Error(`Slot(${slotName}) has been occupied`) } this.addOnRenderers[slotName] = item.props.children nameChecked.push(slotName) } }) } return () } } } export default SlotProviderHoC 6 最终渲染结果
总结
以上所述是小编给大家介绍的使用react context 实现vue插槽slot功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！您可能感兴趣的文章:
上一条：
jquery图片预览插件实现方法详解
下一条：
jQuery实现图片下载代码
- 相关文章
- 使用 Alpine.js 排序插件对元素进行排序(0个评论)
- 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
- 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
- 使用mock-server实现模拟接口对接流程步骤(0个评论)
- vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
- 近期文章
- 智能合约Solidity学习CryptoZombie二课:让你的僵尸猎食(0个评论)
- 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
- 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
- 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
- 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
- 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
- gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
- 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
- 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
- Laravel从Accel获得5700万美元A轮融资(0个评论)
- 近期评论
-
122 在
学历：一种延缓就业设计，生活需求下的权衡之选中评论 工作几年后，报名考研了，到现在还没认真学习备考，迷茫中。作为一名北漂互联网打工人.. -
123 在
Clash for Windows作者删库跑路了，github已404中评论 按理说只要你在国内，所有的流量进出都在监控范围内，不管你怎么隐藏也没用，想搞你分.. -
原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了，今天刚看，已经添加。.. -
博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了，可以看看近期评论的其他文章.. -
1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开，博主百忙中能否发个APP下载链接，佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号
