React中实现插槽效果的方案
文章目录
- React实现插槽
- children实现插槽
- props实现插槽
React实现插槽
在开发中,我们抽取了一个组件,但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div、span等等这些元素。
我们应该让使用者可以决定某一块区域到底存放什么内容
这种需求在Vue当中有一个固定的做法是通过slot来完成的,React呢?
在React中是没有插槽的概念的, 或者说在React中是不需要插槽的, 因为React对于这种需要插槽的情况非常灵活,有两种方案可以实现:
组件的children子元素;
props属性传递React元素;
children实现插槽
每个组件都可以获取到 props.children
:它包含组件的开始标签和结束标签之间的内容
。
例如我们实现一个navbar, 要求左边, 中间, 右边的内容是不固定的, 由使用者来决定到底放什么
- 在父组件的子组件标签中写入要插入到子组件的元素
import React, { Component } from 'react'
import NavBar from './c-cpns/NavBar'export class App extends Component {render() {return (<div>{/* 父组件将要插入到子组件的元素写到组件标签中 */}<NavBar><button>按钮</button><h2>标题</h2><i>斜体</i></NavBar></div>)}
}export default App
- 在子组件中通过
this.props
可以获取到一个children
属性, 该属性中包含子组件标签开始到结束之间的内容
import React, { Component } from 'react'
import './style.css'export class NavBar extends Component {render() {// 在子组件通过props中的children, 获取到要插入的元素const { children } = this.propsreturn (<div className='nav-bar'><div className='left'>{children[0]}</div><div className='center'>{children[1]}</div><div className='right'>{children[2]}</div></div>)}
}export default NavBar
注意: 如果children中有多个元素, 那么children是一个数组, 数组中存放着所有内容; 如果只插入一个元素到子组件中, 那么children本身就是插入的该元素, 如下:
父组件中只插入了一个元素
return (<div>{/* 父组件将要插入到子组件的元素写到组件标签中 */}<NavBar><button>按钮</button></NavBar></div>
)
子组件直接使用children即可
render() {// 在子组件通过props中的children, 获取到要插入的元素const { children } = this.propsreturn (<div className='nav-bar'><div className='left'>{children}</div></div>)
}
props实现插槽
通过children实现的方案虽然可行,但是有一个弊端:通过索引值获取传入的元素很容易出错,不能精准的获取传入的原生;
而且对顺序有严格的要求
另外一个种方案就是使用 props 实现(这个方案也是开发中使用的比较多的方案, 个人更推荐):
我们之间通过具体的属性名,可以让我们在传入和获取时更加的精准;
首先在父组件通过props的方式将要插入的元素传入到子组件中
import React, { Component } from 'react'
import NavBarTwo from './c-cpns/NavBarTwo'export class App extends Component {render() {// 定义要传入到子组件的元素const leftSlot = <button>按钮</button>const centerSlot = <h2>标题</h2>const rightSlot = <i>斜体</i>return (<div>{/* 将插入的元素通过props的方式传入到子组件 */}<NavBarTwoleftSlot={leftSlot}centerSlot={centerSlot}rightSlot={rightSlot}/></div>)}
}export default App
再在子组件中获取到传递的数据进行展示
import React, { Component } from 'react'export class NavBarTow extends Component {render() {// 在子组件中获取到父组件传递过来的数据const { leftSlot, centerSlot, rightSlot } = this.propsreturn (<div className='nav-bar'>{/* 将传递过来的数据进行展示 */}<div className='left'>{leftSlot}</div><div className='center'>{centerSlot}</div><div className='right'>{rightSlot}</div></div>)}
}export default NavBarTow
React中实现插槽效果的方案相关推荐
- React中实现插槽
React中实现插槽 设计插槽 在React中实现插槽需要我们自己来实现 主要用到props.children 我们以跟组件作为父组件 创建子组件DemoOne组件 import React from ...
- antd中table组件中如何进行换行操作(react中)
antd中table组件中如何进行换行操作(react中) 说明 效果 数据 代码 说明 react项目,遇到某字段对应的单元格内需要换行. 最初想偷懒,尝试了在数据中加入回车.使用模板字符串.转义字 ...
- [Redux/Mobx] 在React中你是怎么对异步方案进行选型的?
[Redux/Mobx] 在React中你是怎么对异步方案进行选型的? 小项目使用简单的redux-thunk方案,增加的代码量极少,只有两个api,上手成本低 大项目使用基于redux-saga的d ...
- React中实现类似v-click-outside效果
React中实现类似v-click-outside效果 问题背景 有时候我们需要点击某个下拉框等元素.组件的外部关闭下拉框. 解决方法 使用window.addEventListener监听整个页面 ...
- react中实现取色器的效果React Color
前言: react中实现取色器的效果 官网地址:入口 源码:https://github.com/casesandberg/react-color.git 实现效果: 步骤: 第一:引入 npm in ...
- react中数据状态管理的四种方案
我们为什么需要状态管理? (1) 一个是为了解决相邻组件的通信问题. 虽然可以通过「状态提升」解决,但有两个问题: 每次子组件更新,都会触发负责下发状态的父组件的整体更新(使用 Context 也有这 ...
- react中cesium添加billboard广告牌,billboard点击事件和鼠标滑过效果
刚做完项目中广告牌的效果,顺便分享一下.更多可以参考官网的例子查看详情 先上效果图: 1.添加广告牌: 2.鼠标滑过效果(放大了一点点): 3.鼠标点击后,视野定位到具体的位置: 1.添加广告牌代码: ...
- react怎么存上一页_如何实现 React 中的状态自动保存?
什么是状态保存? 假设有下述场景: 移动端中,用户访问了一个列表页,上拉浏览列表页的过程中,随着滚动高度逐渐增加,数据也将采用触底分页加载的形式逐步增加,列表页浏览到某个位置,用户看到了感兴趣的项目, ...
- react 技术栈项目轻量化方案调研
react 技术栈项目轻量化方案调研 团队的新项目,无论是pc端的还是移动端的,都已全面转移到了 react 的技术栈. 然而,对移动端来说,react 框架脚本的体量还是有些偏大. 在后续项目比较成 ...
最新文章
- 2022-2028年中国灭火器行业市场前瞻与投资战略规划分析报告
- DllMain使用的注意事项
- 成为数据专家,你只差一个Quick Insights的距离
- 引用程序集没有强名称解决办法
- 【测试】物料帐单/多级差异流转测试
- cmake 常用命令
- iOS App 调用QQ客户端,发起临时会话
- 《生产实习》实习报告——JAVA大数据工程师
- FlinkKafkaProducer源码解读
- 怎样用计算机表白我爱你,微信表白的新套路,用隐藏性代码说我爱你,成功率99%...
- TDengine在图扑工业物联网监控平台中的应用
- 修改Linux swap大小,LINUX操作系统如何调整SWAP大小
- 【教程】安装torch_sparse、torch_cluster、torch_scatter、torch_spline
- android 一个app启动另一个App的几种方法
- Java接口实现打印机
- windows 10远程连接ubuntu 18.04 Gnome桌面:NoMachine工具使用详解
- 腾讯面试题、智力题、Java:小Q的父母要出差N天,走之前给小Q留下了M块巧克力
- MOOC《Python语言程序设计》(第15次)Python计算生态概览(第九周)
- 2022年危险化学品生产单位主要负责人考试题库及在线模拟考试
- MySQL中sum和count用法总结
热门文章
- vue 使用keep-alive 三级以上的路由无法缓存解决方案
- Vsphere 向存储器中上传文件
- 2020年3月6日,部分iPhone无法连接到App Store 解决办法
- 网红城市里的网红品牌,颐而康为何不简单?
- 好编剧的春天不到,好演员的春天能来吗?
- oracle防止sql注入proc,解密:Oracle怎么防SQL注入
- excel表格输入数字变成乱码?
- 不规则图形数格子的方法_五年级数学上册《方格图中不规则图形的面积计算》教案...
- c++的grpc例子
- [QQ机器人]Nonebot2 翻译插件