react中props 的使用及進行限制的方法
更新時間：2021年04月28日 17:18:25 作者：河軟小寶
這篇文章主要介紹了react中的props 的使用及進行限制的方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
組件的props（ props是一個對象 ）
作用：接收傳遞給組件的數(shù)據(jù)
特點：
- 可以給組件傳遞任意類型的數(shù)據(jù)
- props是只讀的對象，只能讀取屬性的值，無法修改對象
- 注意：使用類組件時，如果寫了構(gòu)造函數(shù)，應該將props傳遞給super()，否則，無法在構(gòu)造函數(shù)中獲取到
props props 的使用
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<!-- 引入react核心庫 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于將jsx 轉(zhuǎn)換為 js -->
<script src="../js/babel.min.js"></script>
<script type='text/babel'>
// 創(chuàng)建組件
class Person extends React.Component{
render() {
console.log(this);
const{name,age,sex} = this.props
return(
<ul>
<li>姓名：{name}</li>
<li>性別：{sex}</li>
<li>年齡：{age+1}</li>
</ul>
)
}
}
// 渲染組件到頁面
ReactDOM.render(<Person name="jerry" age={19} sex="男" />,document.getElementById('test1'))
ReactDOM.render(<Person name="tom" age={18} sex="女" />,document.getElementById('test2'))
const p = {name:'老劉',age:18,sex:'女'}
// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex} />,document.getElementById('test3'))
ReactDOM.render(<Person {...p} />,document.getElementById('test3'))
</script>
對props進行限制
一定要引入 prop-types.js 否則會報錯
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<!-- 引入react核心庫 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于將jsx 轉(zhuǎn)換為 js -->
<script src="../js/babel.min.js"></script>
<!-- 引入prop-types, 用于對組件標簽屬性進行限制 引入后全局就多了一個對象 PropTypes -->
<script src="../js/prop-types.js"></script>
<script type='text/babel'>
// 創(chuàng)建組件
class Person extends React.Component{
render() {
console.log(this);
const{name,age,sex} = this.props
return(
<ul>
<li>姓名：{name}</li>
<li>性別：{sex}</li>
<li>年齡：{age+1}</li>
</ul>
)
}
}
// 限制規(guī)則
Person.propTypes = {
// 限制name 內(nèi)容為字符串 isRequired 表示該內(nèi)容為必須的不能省略
name:PropTypes.string.isRequired,
// 限制sex為字符串
sex: PropTypes.string,
// 限制age為數(shù)值
age: PropTypes.number,
// 限制speak為函數(shù)
speak: PropTypes.func
}
Person.defaultProps = {
sex:'男',// sex 默認值 為男
age:18,
speak: function() {
return [1];
}
}
// 渲染組件到頁面
ReactDOM.render(<Person name="jerry" age={19} />,document.getElementById('test1'))
ReactDOM.render(<Person name="tom" age={18} sex="女" />,document.getElementById('test2'))
const p = {name:'老劉',age:18,sex:'女'}
// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex} />,document.getElementById('test3'))
ReactDOM.render(<Person {...p} />,document.getElementById('test3'))
</script>
Vue 對props進行限定
我們可以為組件的 prop 指定驗證要求，例如你知道的這些類型。如果有一個需求沒有被滿足，則 Vue 會在瀏覽器控制臺中警告你。這在開發(fā)一個會被別人用到的組件時尤其有幫助。
為了定制 prop 的驗證方式，你可以為 props 中的值提供一個帶有驗證需求的對象，而不是一個字符串數(shù)組。例如：
Vue.component('my-component', {
props: {
// 基礎的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證)
propA: Number,
// 多個可能的類型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 帶有默認值的數(shù)字
propD: {
type: Number,
default: 100
},
// 帶有默認值的對象
propE: {
type: Object,
// 對象或數(shù)組默認值必須從一個工廠函數(shù)獲取
default: function () {
return { message: 'hello' }
}
},
// 自定義驗證函數(shù)
propF: {
validator: function (value) {
// 這個值必須匹配下列字符串中的一個
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
當 prop 驗證失敗的時候，(開發(fā)環(huán)境構(gòu)建版本的) Vue 將會產(chǎn)生一個控制臺的警告。
注意那些 prop 會在一個組件實例創(chuàng)建之前進行驗證，所以實例的 property (如 data、computed 等) 在 default 或 validator 函數(shù)中是不可用的。
類型檢查
type 可以是下列原生構(gòu)造函數(shù)中的一個：
String Number Boolean Array Object Date Function Symbol
額外的，type 還可以是一個自定義的構(gòu)造函數(shù)，并且通過 instanceof 來進行檢查確認。例如，給定下列現(xiàn)成的構(gòu)造函數(shù)：
function Person (firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
你可以使用：
Vue.component('blog-post', {
props: {
author: Person
}
})
來驗證 author prop 的值是否是通過 new Person 創(chuàng)建的。
到此這篇關于react 中的 props 的使用以及進行限制的文章就介紹到這了,更多相關react props進行限制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
React?Hooks useReducer?逃避deps組件渲染次數(shù)增加陷阱
這篇文章主要介紹了React?Hooks?之?useReducer?逃避deps后增加組件渲染次數(shù)的陷阱詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了React源碼調(diào)試方式實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了React 數(shù)據(jù)獲取條件競爭原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了React中的Hooks路由跳轉(zhuǎn)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
React18從0實現(xiàn)dispatch?update流程
這篇文章主要為大家介紹了React18從0實現(xiàn)dispatch?update流程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
pubsub-js?是一個用于實現(xiàn)發(fā)布-訂閱模式的 JavaScript 庫,可以用于不同組件之間的通信,在 React 中,可以使用?pubsub-js?來實現(xiàn)組件之間的通信,本篇文章給大家講解pubsub-js在react中的使用,感興趣的朋友一起看看吧2023-10-10
本文主要介紹了react中antd Upload手動上傳的示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家介紹了styled-components?的性能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
Hooks?發(fā)布之后，函數(shù)組件能擁有自己的?state，React提供了很多內(nèi)置的Hooks，這篇文章就來和大家介紹一下useState?和?useEffect的使用，需要的可以參考一下2023-06-06
這篇文章主要介紹了react組件實例屬性props,本文結(jié)合實例代碼給大家簡單介紹了props使用方法，代碼簡單易懂，需要的朋友可以參考下2023-01-01