props中的children属性

组件标签只用有子节点的时候,props就会有该属性;
children的属性跟props一样的,值可以是任意值;(文本,React元素,组件,函数) 组件: <ClassCom> 传递的数据 </ClassCom>
这样的组件标签中就会有子节点

props中的children的简单使用

<!-- 主页面 -->
import React from 'react';
import ReactDOM from 'react-dom';
import ClassCom from "./components/ClassCom"
ReactDOM.render(<ClassCom>传递的数据</ClassCom>,document.getElementById('root'))
子组件
import React from "react";
// 函数组件
// const ClassCom = (props) => {
// return (
// <div>
// <h2>组件</h2>
// { props.children }
// </div>
// )
// } // 类组件
class ClassCom extends React.Component{
render() {
return (
<div>
<p>-------我是子组件--------</p>
{this.props.children}
</div>
)
}
} export default ClassCom

props中children的属性是标签

<!-- 主页面 -->
import React from 'react'; //这个是react这个包,我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
import ClassCom from "./components/ClassCom"
ReactDOM.render(<ClassCom>
<p>我是一个p标签</p>
</ClassCom>, document.getElementById('root')) <!-- 子组件 -->
import React from "react";
// 类组件
class ClassCom extends React.Component{
render() {
return (
<div>
<p>-------我是子组件--------</p>
{this.props.children}
</div>
)
}
}
export default ClassCom

props的校验

为什么会有props的校验。因为props是外来的。
我们无法保证使用者传递过来的参数是什么格式的。
如果我们这个props是数组,而使用者传递的是数字。
这个时候会出现意想不到的后果。
所以我们需要对props进行校验,如props的类型,格式。

校验步骤

1.需要安装一个包 yarn add prop-types 或者 npm i prop-types
2.导包 import PropTypes from 'prop-types'
3. 组件名.PropTypes = { 属性:PropTypes.类型 }

PropTypes的类型有

PropTypes.array    数组
PropTypes.bool 布尔
PropTypes.func 函数
PropTypes.number
PropTypes.object
PropTypes.string

props校验的简单使用

//组件
import React from "react";
// 导包
import PropTypes from 'prop-types'
// 类组件
class ClassCom extends React.Component{
render() {
return (
<div>
{
this.props.arr.map(item => <li key={item.id }> { item.name}</li>)
}
数字: {this.props.num }
</div>
)
}
}
ClassCom.propTypes = {
// 希望传递过来的arr是数组
arr: PropTypes.array,
num:PropTypes.number
}
export default ClassCom

当传递的数据不符合条件的时候

import React from 'react';
import ReactDOM from 'react-dom';
import ClassCom from "./components/ClassCom"
const list = [{name:'李大为',id:1},{name:'夏洁',id:2}]
ReactDOM.render(<ClassCom arr={list} num={100}></ClassCom>, document.getElementById('root'))

Props的约束规则

// num属性是必填写的
num: PropTypes.number.isRequired, // 特定结果的对象
myObj: PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number,
sex:PropTypes.bool
}) // 表示是一个React元素
tag:PropTypes.element

Props的默认值的设置

// ClassCom是组件名称
ClassCom.defaultProps = {
pageSize:10
} 使用的时候 页数: { this.props.pageSize}

Props限制的简单使用

import React from 'react';
import ReactDOM from 'react-dom';
import ClassCom from "./components/ClassCom"
const list = [{ name: '李大为', id: 1 }, { name: '夏洁', id: 2 }]
const obj = {
name: 123, //这个类型不正确
sex: '男',
age:18
}
ReactDOM.render(<ClassCom arr={list} num={100} myObj={ obj}></ClassCom>, document.getElementById('root'))
import React from "react";
// 导包
import PropTypes from 'prop-types'
// 类组件
class ClassCom extends React.Component{
render() {
return (
<div>
{
this.props.arr.map(item => <li key={item.id }> { item.name}</li>)
}
数字: {this.props.num}
页数 { this.props.pageSize}
</div>
)
}
}
ClassCom.propTypes = {
// 希望传递过来的arr是数组
arr: PropTypes.array,
// num属性是必填写的
num: PropTypes.number.isRequired,
// 特定结果的对象
myObj: PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number,
sex:PropTypes.bool
}),
// 表示是一个React元素
tag: PropTypes.element
}
<!-- 这是默认值 -->
ClassCom.defaultProps = {
pageSize:10
}
export default ClassCom

React中Props的详细使用和props的校验的更多相关文章

  1. react中constructor和super()以及super(props)的区别。

    react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 const ...

  2. react中的jsx详细理解

    这是官网上的一个简单的例子 const name = 'Josh Perez'; const element = <h1>Hello, {name}</h1>; ReactDO ...

  3. React中的Context——从父组件传递数据

    简介:在React中,数据可以以流的形式自上而下的传递,每当你使用一个组件的时候,你可以看到组件的props属性会自上而下的传递.但是,在某些情况下,我们不想通过父组件的props属性一级一级的往下传 ...

  4. React中render Props模式

    React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...

  5. React中props.children和React.Children的区别

    在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...

  6. React中props

    今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧 昨天按摩没到位,导致今天身体不太行,撸码千万别苦了 ...

  7. React中Props 和 State用法

    React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...

  8. react中直接调用子组件的方法(非props方式)

    我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...

  9. react 中state与props

    react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...

  10. React中props与state

    以下内容均为个人理解. 1.state: 在react中,state可以看成管理页面状态的集合(实则一个对象而已),库里面的成员均为页面渲染变量,整个页面为一个状态机,当state发生变化时,页面会重 ...

随机推荐

  1. 跟着字节AB工具DataTester,5步开启一个实验

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群   火山引擎A/B测试平台DataTester孵化于字节跳动业务内部,在字节跳动,"万事皆A/B,一切可 ...

  2. 用 Java?试试国产轻量的 Solon v1.10.7

    Java 国产的轻量级应用开发框架.可用来快速开发 Java 应用项目.主框架仅 0.1 MB.Helloworld: @Controller public class App { public st ...

  3. PPT 呼吸感

    任何元素都应该保持一定的距离,留出可以"呼吸"的空间 呼吸感 怎么营造 不要让内容超出/接近边框 类似的元素摆放在一起 控制 行间距/字间距 行间距:1.3.字间距:1.0 :行间 ...

  4. 围绕ChatGPT,做了点小事,赚了点小钱

    大家好,我是章北海mlpy 作为 ChatGPT 日活用户,分享一下经验和用它做的一些小事吧. 经验不敢当,只是觉得大家把ChatGPT当成了高大上的黑科技,其实它就是个工具,就像你买了个新手机一样, ...

  5. XShell、XFtp免费许可证增强:删除标签限制!

    大家好,我是DD! XShell相信大家都不陌生了,作为Windows平台下最强大的SSH工具,是大部分开发者的必备工具.但由于免费许可证的标签限制,有不少开发者会去找破解版使用.虽然功能是可以使用了 ...

  6. AtCoder Beginner Contest 185 题解

    A - ABC Preparation 排序找出最小值 int main() { ios_base::sync_with_stdio(false), cin.tie(0); vector<int ...

  7. C++17 更通用的 union:variant

    References 现代C++学习--实现多类型存储std::variant 如何优雅的使用 std::variant 与 std::optional std::variant 是 C++17 中, ...

  8. 0x01 基本算法-位运算

    A题:a^b https://ac.nowcoder.com/acm/contest/996/A 题目描述 求 a 的 b 次方对 p 取模的值,其中 0 <= a,b,p <= 10^9 ...

  9. 推荐收藏!年度Top20开源许可证风险等级

    开源许可现状 开发人员经常在软件中引入开源的代码片段.函数.方法和操作代码.因此,软件代码中经常会包含各种声明不同许可证的子组件.这些子组件的许可证条款和条件与项目整体主许可证的条款和条件冲突时,就会 ...

  10. KCD技术分享:以SBOM为基础的云原生应用安全治理

    随着越来越多的企业和组织将他们的应用迁移到云上,云原生技术的应用部署和管理正在变得更加灵活和高效,但也相应地引入了一些新的安全风险.2023年4月15日,由云原生计算基金会(CNCF)发起,全球各国当 ...