发布时间:2023-12-31 08:30
在开发中,我们抽取了一个组件,但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div、span等等这些元素。
我们应该让使用者可以决定某一块区域到底存放什么内容
这种需求在Vue当中有一个固定的做法是通过slot来完成的,React呢?
在React中是没有插槽的概念的, 或者说在React中是不需要插槽的, 因为React对于这种需要插槽的情况非常灵活,有两种方案可以实现:
组件的children子元素;
props属性传递React元素;
每个组件都可以获取到 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.props
return (
<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.props
return (
<div className='nav-bar'>
<div className='left'>
{children}
</div>
</div>
)
}
通过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的方式传入到子组件 */}
<NavBarTwo
leftSlot={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.props
return (
<div className='nav-bar'>
{/* 将传递过来的数据进行展示 */}
<div className='left'>
{leftSlot}
</div>
<div className='center'>
{centerSlot}
</div>
<div className='right'>
{rightSlot}
</div>
</div>
)
}
}
export default NavBarTow
如何用Arduino IDE开发9.9元的合宙LuatOS ESP32C3开发板?
thinkphp使用paginate()分页后给结果集追加字段或数据
M1支持Windows arm_苹果首发ARM架构电脑芯片,将对PC格局带来哪些影响?
Win10/Win11子系统(一)——wsl2+Ubuntu20.04安装记录
Selenium+Pytest自动化测试框架实战-入门到精通
Python 项目实战 教你用Pygame写一个Pong游戏
CTC Algorithm Explained Part 1:Training the Network(CTC算法详解之训练篇)
【毕业设计】基于RFID的门禁系统 - 单片机 物联网 嵌入式 stm32
【docker专栏4】使用docker安装nginx提供web服务