如果你想要实现自己的梦想,就必须先拥有勇气去追求它。
1. React Props
属性 props 主要解决两个问题:复用性问题以及可以让组件之间通信。
属性 props 正常是外部传入的,组件内部也可以通过一些方式来初始化的设置,属性不能被组件自己更改(属性是描述性质、特点的,组件自己不能随意更改),但是你可以通过父组件主动重新渲染的方式来传入新的 props。
工程组件代码里面有 props 的简单使用,总的来说,在使用一个组件的时候,可以把参数放在标签的属性当中,所有的属性都会作为组件 props 对象的键值。通过箭头函数创建的组件,需要通过函数的参数(形参)来接收 props:
(1) 在组件上通过 key=value 写属性,通过 this.props 获取属性,这样组件的可复用性提高了。
(2)注意在传参数时候,如果写成 isShow="'true" 那么这是一个字符串,如果写成 isShow={true} 这个是布尔值。
(3)对象传递可以通过 {...对象} 展开赋值,后面也可以加其它属性。
2. 属性默认值
2.1)类组件
类组件使用 defaultProps 给组件设置属性默认值。
// Navbar 自定义组件
// 默认属性值定义方法一:组件外部定义 - 不推荐
Navbar.defaultProps = {
title: "默认标题"
}
// 默认属性值定义方法二:组件内部定义
static defaultProps = {
title: "默认标题"
}
2.2)函数式组件
函数式组件直接使用函数参数默认值来设置 props 默认值。也可以通过 Navbar.defaultProps 来设置默认值,不推荐。
3. 属性类型验证
3.1)不做验证
直接通过 this.props 获取属性,不做任何验证。
3.2)prop-types
prop-types 是一个 React 属性校验库,使用如下:
import React, { Component } from 'react'
import kvTypes from 'prop-types'
// 状态只能内部自己使用,不能进行传递。属性是父组件传递过来的,this.props。
export default class Navbar extends Component {
// 类属性定义方法二、类型验证
static propTypes = {
title: kvTypes.string,
showLeft: kvTypes.bool,
showRight: kvTypes.bool
}
render() {
// 属性解构
let { title, showLeft, showRight } = this.props
return (
<div>
{ showLeft && <button>返回</button> }
navbar-{title}
{ showRight && <button>搜索</button> }
</div>
)
}
}
// 类属性定义方法一、类型验证
// Navbar.propTypes = {
// title: kvTypes.string,
// showLeft: kvTypes.bool,
// showRight: kvTypes.bool
// }
4. 函数式组件 Props
函数式组件 Props 是直接通过形式参数进行数据传递。参数验证和默认值只能通过 Navbar.propTypes 和 Navbar.defaultProps 设置。文章来源:https://www.toymoban.com/news/detail-747278.html
import React from 'react'
export default function Slidbar(props) {
return (
<div>Slidbar</div>
)
}
5. 插槽 slot
插槽(slot)是属性中的特殊属性,写法固定,能够在组件构建的时候向组件模版定义好的位置插入自定义的结构。插槽的作用可以总结为以下两点:文章来源地址https://www.toymoban.com/news/detail-747278.html
- 能够使组件得到更好的复用;
- 在一定程度减少父子通信;
import React, { Component } from 'react'
class Child extends Component {
render() {
return (
<div>
Child
{/* 插槽 vue 叫 slot 属性中的特殊属性 */}
{ this.props.children[2]}
</div>
)
}
}
export default class App extends Component {
render() {
return (
<div>
<Child>
{/* 这里 div 中的内容是不会展示的,App 在渲染的时候,解析到 Child 组件的时候,
Child 定义模版(上面定义)会替换掉下面构建的 Child 组件,这里加的 div 是不会被包裹显示的。
*/}
{/* 这里定义的结构会被挂到一个特别的属性上面:children */}
<div>组件中写内容1</div>
<div>组件中写内容2</div>
<div>组件中写内容3</div>
</Child>
</div>
)
}
}
到了这里,关于React 组件之属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!