React-05React中props屬性（傳遞數據），propTypes校驗，類式與函數式組件props的使用

1.類式組件props基本數據讀取與解構運算符傳遞

 <script type="text/babel">//  創建組件class PersonalInfo extends React.Component {render() {// 讀取props屬性 并讀取值console.log('props',this.props);return(<ul><li>姓名：{this.props.name}</li><li>性別：{this.props.gender}</li><li>年齡：{this.props.age}</li></ul>) }}// 渲染組件const p ={name:'豈不聞',gender:'男',age:'24'}// 展開運算符  解構賦值 babel+react 解構運算符 僅使用與標簽中數據傳遞ReactDOM.render(<PersonalInfo {...p} />,document.getElementById('test1'))ReactDOM.render(<PersonalInfo name='呀呀呀' gender='女' age='23' />,document.getElementById('test2'))</script>

2.類式組件propTypes校驗props傳遞數據規則

propTypes是react提供的一種工具，對于組件的props進行類型檢查

?2.1 html引入prop-types.js

 <!--  {/* // 引入 PropTypes */} --><script src="https://unpkg.com/prop-types@15.6.2/prop-types.js"></script>

2.2 react腳手架引入

npm install prop-types

2.3?propTypes驗證器聲明類型

基本數據類型

PropTypes.string：字符串
PropTypes.number：數字
PropTypes.boolean：布爾值
PropTypes.object：對象
PropTypes.array：數組
PropTypes.func：函數
PropTypes.symbol：Symbol

特殊類型

PropTypes.node：任何可以被渲染的內容：數字、字符串、元素或數組（包括這些類型）
PropTypes.element：React元素
PropTypes.instanceOf(Class)：某個類的實例

組合類型

PropTypes.oneOf(['option1', 'option2'])：枚舉類型，值必須是所提供選項之一
PropTypes.oneOfType([PropTypes.string, PropTypes.number])：多個類型中的一個
PropTypes.arrayOf(PropTypes.number)：某種類型組成的數組
PropTypes.objectOf(PropTypes.number)：某種類型組成的對象
PropTypes.shape({ key: PropTypes.string, value: PropTypes.number })：具有特定形狀的對象

2.4具體代碼例子

?指定標簽默認屬性

        // 指定標簽默認屬性PersonalInfo.defaultProps = {name: '未知',gender: '未知',age: 0}

?props傳遞限制傳遞數據規則

 PersonalInfo.propTypes = {// 限定為字符串類型 必填項name: PropTypes.string.isRequired,gender: PropTypes.string.isRequired,age: PropTypes.number.isRequired}

擴展運算符批量傳入

        // 渲染組件const p ={name:'豈不聞',gender:'男',age:'24'}// 展開運算符  解構賦值 babel+react 解構運算符 僅使用與標簽中數據傳遞ReactDOM.render(<PersonalInfo {...p} />,document.getElementById('test1'))

?整體代碼

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello，React</title>
</head><body><!-- 容器 --><div id="test1"></div><!-- 容器 --><div id="test2"></div><!-- {/* // 引入 React核心庫 */} --><script src="https://unpkg.com/react@16/umd/react.production.min.js"></script><!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} --><script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!--  {/* // 引入 PropTypes */} --><script src="https://unpkg.com/prop-types@15.6.2/prop-types.js"></script><script type="text/babel">//  創建組件class PersonalInfo extends React.Component {render() {// 讀取props屬性 并讀取值console.log('props',this.props);const {name,gender,age} = this.props;return(<ul><li>姓名：{name}</li><li>性別：{gender}</li><li>年齡：{age}</li></ul>) }}// 指定標簽默認屬性PersonalInfo.defaultProps = {name: '未知',gender: '未知',age: 0}// props傳遞限制傳遞數據規則PersonalInfo.propTypes = {// 限定為字符串類型 必填項name: PropTypes.string.isRequired,gender: PropTypes.string.isRequired,age: PropTypes.number.isRequired}// 渲染組件const p ={name:'豈不聞',gender:'男',age:'24'}// 展開運算符  解構賦值 babel+react 解構運算符 僅使用與標簽中數據傳遞ReactDOM.render(<PersonalInfo {...p} />,document.getElementById('test1'))ReactDOM.render(<PersonalInfo name='呀呀呀' gender='女' age='23' />,document.getElementById('test2'))</script>
</body></html>

3.類式組件props的簡寫方式（static 關鍵字）

 <script type="text/babel">// 創建組件class PersonalInfo extends React.Component {// 指定標簽默認屬性static defaultProps = {name: '未知',gender: '未知',age: 0}// props傳遞限制傳遞數據規則static propTypes = {// 限定為字符串類型 必填項name: PropTypes.string.isRequired,gender: PropTypes.string.isRequired,age: PropTypes.number.isRequired}render() {// 讀取props屬性 并讀取值console.log('props',this.props);const {name,gender,age} = this.props;return(<ul><li>姓名：{name}</li><li>性別：{gender}</li><li>年齡：{age}</li></ul>) }}// 渲染組件const p ={name:'豈不聞',gender:'男',age:'24'}// 展開運算符  解構賦值 babel+react 解構運算符 僅使用與標簽中數據傳遞ReactDOM.render(<PersonalInfo {...p} />,document.getElementById('test1'))ReactDOM.render(<PersonalInfo name='呀呀呀' gender='女' age='23' />,document.getElementById('test2'))</script>

?4.函數式組件props的使用

 <script type="text/babel">// 指定標簽默認屬性PersonalInfo.defaultProps = {name: '未知',gender: '未知',age: 0}//  props傳遞限制傳遞數據規則PersonalInfo.propTypes = {// 限定為字符串類型 必填項name: PropTypes.string.isRequired,gender: PropTypes.string.isRequired,age: PropTypes.number.isRequired}// 函數式組件function PersonalInfo(props){// 解構賦值const {name,gender,age} = props;return(<ul><li>姓名：{name}</li><li>性別：{gender}</li><li>年齡：{age}</li></ul>) }// 組件渲染ReactDOM.render(<PersonalInfo name='呀呀呀' gender='女' age='23' />,document.getElementById('test2'))</script>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/77258.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/77258.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/77258.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！