如果你想要实现自己的梦想,就必须先拥有勇气去追求它。

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 设置。

import React from 'react'

export default function Slidbar(props) {
return (
<div>Slidbar</div>
)
}

5. 插槽 slot

插槽(slot)是属性中的特殊属性,写法固定,能够在组件构建的时候向组件模版定义好的位置插入自定义的结构。插槽的作用可以总结为以下两点:

  • 能够使组件得到更好的复用;
  • 在一定程度减少父子通信;
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 组件之属性的更多相关文章

  1. React组件三大属性之 refs

    React组件三大属性之 refs refs属性 1) 组件内的标签都可以定义ref属性来标识自己 a. <input type="text" ref={input => ...

  2. React组件三大属性之 props

    React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...

  3. React组件三大属性之state

    React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...

  4. React组件的属性

    组件的三大属性 state props refs 写组件的要求: 1>组件必须大写 2>组件必须只有一个根元素 state是组件的重要对象 值可以是对象 组件被称之为 状态机 通过跟新组件 ...

  5. React组件属性部类(propTypes)校验

    React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...

  6. React组件属性/方法/库属性

    1. propTypes 用于进行props的类型检查:来自于prop-types库. // V15.5之后 import PropTypes from 'prop-types'; 该方法适用于函数组 ...

  7. React组件(组件属性this.state和this.props,css样式修饰组件)

    目录: 1.创建组件的第一种方式 function2.将组件抽离为单独的jsx文件3.省略.jsx后缀, 配置webpack设置根目录4.创建组件的第二种方式--使用class关键字创建组件5.组件私 ...

  8. 野心勃勃的React组件生命周期

    当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件    React实现了UI=Fn(St ...

  9. React组件性能优化

    转自:https://segmentfault.com/a/1190000006100489 React: 一个用于构建用户界面的JAVASCRIPT库. React仅仅专注于UI层:它使用虚拟DOM ...

  10. React组件

    React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...

随机推荐

  1. [转帖]Redis命令详解:Keys

    https://jackeyzhe.github.io/2018/09/22/Redis%E5%91%BD%E4%BB%A4%E8%AF%A6%E8%A7%A3%EF%BC%9AKeys/ 介绍完Re ...

  2. Redis性能问题诊断以及scan命令耗时分析

    Redis性能问题诊断以及scan命令耗时分析 摘要 最近公司有项目反馈卡顿. 卡顿一小时后自己被拉入群聊. 同事已经基本上定位到问题原因. 我这边想使用朴素的性能观点进行一下性能问题的拆解 为了提高 ...

  3. 最小化安装的CentOS7 上面安装Oracle12C的简单过程

    首先声明自己对静默安装不熟,也害怕初问题,所以不使用静默安装的方式. 因为是最小化安装,所以必须安装GUI界面才可以,以下是过程(早上回忆的,全文字,无截图) 1. 安装GUI界面 yum group ...

  4. CentOS firewall简单总结

    CentOS firewall简单总结 简介 防火墙是安全的重要道防线. 硬件防火墙一般部署再内网的边界区域.作为最外层的防护. 但是一般硬件的防火墙会比较宽松. 不然会导致很多业务不可用 软件防火墙 ...

  5. 如何抓取http请求/拦截器用法

    我们都知道postman是模拟接口向服务端发送请求的,在编写请求数据的时候非常 麻烦,那么如果我们可以先抓取该接口后直接使用,就方便的很多 抓取http请求 1.我们打开postman时就会看见右上角 ...

  6. Bitmap、RoaringBitmap原理分析

    作者:京东科技 曹留界 在人群本地化实践中我们介绍了人群ID中所有的pin的偏移量可以通过Bitmap存储,而Bitmap所占用的空间大小只与偏移量的最大值有关系.假如现在要向Bitmap内存入两个p ...

  7. ARC150D - Removing Gacha (树上期望)

    Link 题意: 给一棵 \(n\) 个节点的树,称一个点是好的,当且仅当它到根的路径上都是黑色(包括自己).每次在不好的节点中随机选一个把它涂成黑色(不管原来它是否是白的),直到所有点都是好的为止. ...

  8. 深度学习应用篇-计算机视觉-语义分割综述[5]:FCN、SegNet、Deeplab等分割算法、常用二维三维半立体数据集汇总、前景展望等

    深度学习应用篇-计算机视觉-语义分割综述[5]:FCN.SegNet.Deeplab等分割算法.常用二维三维半立体数据集汇总.前景展望等 语义分割综述(semantic segmentation) 1 ...

  9. C++ STL 标准模板库(排序/集合/适配器)算法

    C++ 标准模板库STL,是一个使用模板技术实现的通用程序库,该库由容器container,算法algorithm,迭代器iterator,容器和算法之间通过迭代器进行无缝连接,其中所包含的数据结构都 ...

  10. 【部署教程】基于GPT2训练了一个傻狗机器人 - By ChatGPT 技术学习

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 首先我想告诉你,从事编程开发这一行,要学会的是学习的方式方法.方向对了,才能事半功倍.而我认为 ...