網站首頁 編程語言 正文
1. children 屬性
概述：
children 屬性，表示組件標簽的子節點，當組件標簽有子節點時，props 就會有該屬性，與普通的 props 一樣，其值可以是任意類型。單標簽和雙標簽中沒有數據就沒有此屬性。
語法：
# 父組件
class App extends React.Component {
render() {
return (
<div>
<Cmp>我是children中的值</Cmp>
</div>
)
}
}
# 子組件
{props.children} 獲取數據
要點：
- 在自定義組件標簽中間寫的內容，它都會通過 this.props.children 屬性獲取
- 如果自定義組件標簽中間只有一個子元素，則此屬性返回一個對象，如果是多個子元素則返回一個數組。使用它就可以實現類似于vue中的插槽功能。
使用：
import React, { Component } from 'react';
class Child extends Component {
render() {
console.log(this.props.children);
return (
<div>
<h3>我是child組件</h3>
{
this.props.children
?
this.props.children
:
<div>我是默認值</div>
}
</div>
);
}
}
class App extends Component {
render() {
return (
<div>
<Child>
<div>我是child組件元素中間包裹的內容1</div>
<div>我是child組件元素中間包裹的內容2</div>
<div>我是child組件元素中間包裹的內容3</div>
</Child>
</div>
);
}
}
export default App;
1.1 React.cloneElement方法
概述：
cloneElement 方法，是 React 中的頂層 Api 方法，作用是克隆一個虛擬 dom 對象。這個方法對 this.props.children 進行加工拓展后，顯示在頁面上。
使用：
import React, { Component } from 'react';
class Child extends Component {
state = {
id: 1000
}
render() {
// React中的頂層Api方法 克隆一個虛擬dom對象
let cloneElement = React.cloneElement(this.props.children, {
style: { color: 'red' },
uid: this.state.id,
onClick: () => console.log('我是事件', this.state.id)
})
console.log(cloneElement);
return (
<div>
<h3>我是child組件</h3>
<hr />
{cloneElement}
</div>
);
}
}
class App extends Component {
state = {
title: '我是child組件元素中間包裹的內容'
}
render() {
return (
<div>
<Child>
<div>{this.state.title}</div>
</Child>
</div>
);
}
}
export default App;
1.2 React.Children.map方法
概述：
React.Children.map 方法，是 React 中的頂層 Api 方法，作用是遍歷 this.props.children 。
使用：
import React, { Component } from 'react';
class Child extends Component {
state = {
id: 1000
}
render() {
// React中的頂層Api方法 遍歷 React.Children.map
// 這個方法會自動地判斷傳入的數據是數組還是對象
let cloneElement = React.Children.map(this.props.children, (child, index) => {
// console.log(index, child);
return React.cloneElement(child, {
style: { color: 'red' },
uid: this.state.id,
onClick: () => console.log('我是事件', this.state.id)
})
})
return (
<div>
{this.props.header}
<h3>我是child組件</h3>
<hr />
{cloneElement}
<hr />
{this.props.footer}
</div>
);
}
}
class App extends Component {
render() {
return (
<div>
<Child
header={<div>我是頭部</div>}
footer={<div>底部</div>}
>
<div>我是child組件元素中間包裹的內容1</div>
<div>我是child組件元素中間包裹的內容2</div>
<div>我是child組件元素中間包裹的內容3</div>
</Child>
</div>
);
}
}
export default App;
2. 類型限制（prop-types）
概述：
對于組件來說，props 是外部傳入的，無法保證組件使用者傳入什么格式的數據，簡單來說就是組件調用者可能不知道組件封裝者需要什么樣的數據，如果傳入的數據不對，可能會導致程序異常，所以必須要對于 props 傳入的數據類型進行校驗。
React 版本從 15.5 之后就將 prop-types 移出了核心庫，使用它需要安裝：
yarn add prop-types
使用時還需要導入包：
import types from 'prop-types'
語法：
# 函數組件
function App(){}
// 驗證規則
App.propTypes = {
prop-name:PropTypes.string
}
# 類組件
class App extends Component{
}
App.propTypes = {
prop-name:PropTypes.string
}
# 約束類型
- 類型： array、bool、func、number、object、string
- React元素類型：element
- 必填項：isRequired
- 特定結構的對象： shape({})
使用：
import React, { Component } from 'react';
import types from 'prop-types'
class Child extends Component {
render() {
console.log(this.props);
return (
<div>
<h3>我是child組件 -- {this.props.sex}</h3>
</div>
);
}
}
// 字段類型限制
Child.propTypes = {
// age: number
// 年齡的屬性它必須是一個數字類型,且此屬性必須要存在
age: types.number.isRequired,
// 在指定的值中間選擇其中一個
sex: types.oneOf(['男', '女']),
// 定義數組類型
// arr: types.array
// 定義數組類型，并且指定元素的類型
arr: types.arrayOf(types.number),
// 對象類型
// obj: types.object
obj: types.shape({
// id: types.number,
// 兩個類型選擇
id: types.oneOfType([types.number, types.string]),
name: types.string
}),
fn: types.func,
// 自定義規則
// props，當前的屬性列表對象
// key 當前的屬性名稱
phone: (props, key) => {
// 得到屬性的值
let value = props[key]
if (!/^1[3-9]\d{9}$/.test(value)) {
// 如果不正確，一定要返回一個Error對象，這樣就可以在控制臺中看到信息,不要throw
return new Error('有誤')
}
}
}
class App extends Component {
fn = () => {
console.log('fn');
}
render() {
return (
<div>
<Child age={1} sex="男" arr={[1, 2, 3]} obj={{ id: 1, name: '張三' }} fn={this.fn} phone="13523253235" />
</div>
);
}
}
export default App;
3. 默認值(defaultProps)
概述：
如果 props 屬性沒有傳過數據來，為了不讓程序異常，可以設置其默認值。
語法：
# 函數組件
function App(){}
# 類組件
class App extends Component {}
App.defaultProps = {
title: '標題'
}
使用：
import React, { Component } from 'react';
import types from 'prop-types'
class Child extends Component {
// 這是類組件的獨有設置限制字段和默認值的寫法，函數組件不能這么寫
static propTypes = {
age: types.number,
}
static defaultProps = {
age: 2000
}
render() {
// 在此處寫的默認，屬于開發者，自主去寫的，有可能有的開發者他就不定義
// 所以需要用 defaultProps 強制加一個默認值，并且 defaultProps 定義的默認值優先級更高
let { age = 1 } = this.props
console.log(age);
return (
<div>
<h3>我是child組件</h3>
</div>
);
}
}
// 此寫法是類組件和函數組件通用的寫法
// // 字段類型限制
// Child.propTypes = {
// age: types.any,
// }
// // 默認值 直接賦值就可以
// Child.defaultProps = {
// age: 1000
// }
class App extends Component {
render() {
return (
<div>
<Child />
</div>
);
}
}
export default App;
原文鏈接：https://blog.csdn.net/weixin_45605541/article/details/127000844
相關推薦
- 2022-06-10 Asp.Net?Core使用Ocelot結合Consul實現服務注冊和發現_實用技巧
- 2022-09-03 詳解.NET主流的幾款重量級?ORM框架_實用技巧
- 2022-06-24 使用ASP.NET?Web?API構建Restful?API_實用技巧
- 2022-09-27 使用Python?matplotlib繪制簡單的柱形圖、折線圖和直線圖_python
- 2022-06-30 利用Python?實現分布式計算_python
- 2022-09-12 超實用的Nginx常見配置合集分享_nginx
- 2023-11-23 python的相對路徑表示方式
- 2022-06-01 C++的matlab接口轉換方法詳解_C 語言
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速