(React入门)React的插槽
注意:react中其实是没有插槽这个概念的
- 默认插槽:通过组件标签体传入结构,固定写法
props.children
- 具名插槽:通过标签属性
props
传入结构
默认插槽
这里使用的是函数式组件写法
//子组件
function Son(props) {
return <div>{props.children}</div>
}
//父组件
function App(props) {
return (
<div>
<Son>
<span>Hello World</span>
</Son>
</div>
)
}
//结果
<div>
<div>
<span>Hello World</span>
</div>
</div>
具名插槽
这里使用的是类组件写法
import React, { Component } from 'react';
export default class App extends Component {
render() {
return <>
<Son
left={<div>back</div>}
right={<div>next</div>}
>
</Son>
</>
}
}
class Son extends Component {
state = { name: 'fang' }
render() {
return <>
<div>{this.props.left}</div>
<div>{this.props.right}</div>
</>
}
}
React.Children.map
this.props.children
的值有三种可能:
- 如果当前组件没有子节点,它就是
undefined
; - 如果有一个子节点,数据类型是
Object
; - 如果有多个子节点,数据类型就是
Array
。
所以,处理this.props.children
的时候要小心
React 提供一个工具方法 React.Children
来处理 this.props.children
。我们可以用 React.Children.map
来遍历子节点,而不用担心 this.props.children
的数据类型是 undefined
还是 object
。
import React, { Component } from 'react';
export default class App extends Component {
render() {
return <>
{/* 没有子节点 */}
<Son></Son>
{/* 字符串 */}
<Son>Hello World</Son>
{/* 一个子节点 */}
<Son>
<div>Hello React</div>
</Son>
{/* 多个子节点 */}
<Son>
<div>apple</div>
<div>orange</div>
<div>banana</div>
</Son>
</>
}
}
class Son extends Component {
state = { name: 'fang' }
render() {
return <>
{console.log(this.props.children)}
{/* {this.props.children} */}
{React.Children.map(this.props.children, (el) => {
return el
})}
</>
}
}
//console.log打印结果分别是
// undefined
// Hello World
// Object
// Array
上面代码我们可以看出this.props.children
既可以是对象,数组,undefined,那么按照平时处理数据的方式进行处理他的话,会显得很麻烦,那么我们就可以通过react官方提供的React.Children
去进行处理,并且如果你想遍历它的话,可以通过React.Children.map
去遍历它。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhficahg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13