react prophotoshop使用:children属性、prophotoshop校验、prophotoshop的默认值

武飞扬头像

梨轻巧

2024-04-06 帮助1人

目录

一 children属性

1 当组件标签有子节点时,props就会有children属性,children属性的值就是子节点的内容

2 children属性与普通的props一样,值可以是任意值(文本、react元素、组件、函数..)

二 props校验

1 props校验的基本使用

2 props常用校验规则

三 props的默认值

一 children属性

1 当组件标签有子节点时,props就会有children属性,children属性的值就是子节点的内容

import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
render() {
return (
<div>
<h1> 123</h1>
{this.props.children}
</div>
)
}
}
ReactDOM.render(<App>子节点</App>, document.getElementById("root"));

学新通

效果

学新通

学新通

相当于这样

学新通

2 children属性与普通的props一样,值可以是任意值(文本、react元素、组件、函数..)

JXL作为子节点

import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
render() {
return (
<div>
<h1> 123</h1>
{this.props.children}
</div>
)
}
}
//JXL作为子节点
ReactDOM.render(<App><p>我是子节点:p标签</p></App>, document.getElementById("root"));

学新通

子节点也可以是一个组件

import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
render() {
return (
<div>
<h1> 123</h1>
{this.props.children}
</div>
)
}
}
class Test extends React.Component {
render() {
return (
<button>我是button</button>
)
}
}
//子节点也可以是一个组件
ReactDOM.render(<App><Test/></App>, document.getElementById("root"));

学新通

效果

学新通

学新通

子节点也可以是一个函数

import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
render() {
this.props.children()
return (
<div>
<h1> 123</h1>
</div>
)
}
}
//子节点也可以是一个函数
ReactDOM.render(<App>{()=>alert("这是一个函数子节点")}</App>, document.getElementById("root"));

学新通

效果

学新通

二 props校验

1 props校验的基本使用

问题: 组件的创建者和使用者不是同一个人,如果传入的数据格式不对, 可能会导致组件内部报错,组件的使用者不知道明确的错误原因

解决办法: 使用props校验 → 允许在创建组件的时候,就指定props的类型、格式等
使用props校验作用: 捕获错误,给出明确的提示,增加组件的健壮性

使用步骤:
1 安装包:npm i prop-types

学新通

2 导入prop-types包
3 使用组件名.propType={} 添加校验规则

import React from "react";
import ReactDOM from "react-dom";
// 2 导入prop-types包
import PropTypes from "prop-types"
class App extends React.Component {
render() {
const arr = this.props.colors
const list=arr.map(
(item,index)=><li key={index}>{item}</li>
)
return (
<ul>
{list}
</ul>
)
}
}
//3 使用组件名.propType={} 添加校验规则
App.propTypes={
//约束组件的colors为数组类型
colors:PropTypes.array
}
//此处传了一个不符合规范的类型
ReactDOM.render(<App colors={19}/>, document.getElementById("root"));
// ReactDOM.render(<App colors={['red','yellow']}/>, document.getElementById("root"));

学新通

控制台有明确的错误原因

学新通

修改代码改成正确的类型

//此处传了一个不符合规范的类型
//ReactDOM.render(<App colors={19}/>, document.getElementById("root"));
ReactDOM.render(<App colors={['red','yellow']}/>, document.getElementById("root"));

学新通

2 props常用校验规则

1 常见类型:array、bool、func、number、object、string
2 react元素类型:element
3 必填项 isRequired → PropTypes.array.isRequired
4 特定结构的对象: shape({})

// 使用组件名.propType={} 添加校验规则
App.propTypes={
//常见类型:array、bool、func、number、object、string
a:PropTypes.number,
//函数类型,且是必填项
fn:PropTypes.func.isRequired,
//tag属性是react的元素(element)
tag:PropTypes.element,
//shape:特定的结构 area是string类型,price是数字类型
filter:PropTypes.shape({
area:PropTypes.string,
price:PropTypes.number
})
}
ReactDOM.render(<App fn={()=>{}}/>, document.getElementById("root"));

学新通

三 props的默认值

格式: 组件.defaultProps={}

作用: 给props设置默认值,在未传入props时生效

import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
render() {
return(
<div>
<h1>值:{this.props.pageSize}</h1>
</div>
)
}
}
//添加props默认值
App.defaultProps={
pageSize:10
}
ReactDOM.render(<App/>, document.getElementById("root"));

学新通

预览

学新通

传入props,默认值不再生效

ReactDOM.render(<App pageSize={20}/>, document.getElementById("root"));

学新通

这篇好文章是转载于：学新通技术网

版权申明：本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
本站站名：学新通技术网
本文地址： /boutique/detail/tanhfkhfkf

系列文章

同类精品

继续加载