React对标签属性进行限制(props)
生活随笔
收集整理的這篇文章主要介紹了
React对标签属性进行限制(props)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>對props進行限制</title>
</head>
<body><!-- 準備好一個“容器” --><div id="test1"></div><div id="test2"></div><div id="test3"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉為js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 引入prop-types，用于對組件標簽屬性進行限制 --><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">//創建組件class Person extends React.Component{constructor(props){//構造器是否接收props，是否傳遞給super，取決于：是否希望在構造器中通過this訪問props// console.log(props);super(props)console.log('constructor',this.props);}//對標簽屬性進行類型、必要性的限制static propTypes = {name:PropTypes.string.isRequired, //限制name必傳，且為字符串sex:PropTypes.string,//限制sex為字符串age:PropTypes.number,//限制age為數值}//指定默認標簽屬性值static defaultProps = {sex:'男',//sex默認值為男age:18 //age默認值為18}render(){// console.log(this);const {name,age,sex} = this.props//props是只讀的//this.props.name = 'jack' //此行代碼會報錯，因為props是只讀的return (<ul><li>姓名：{name}</li><li>性別：{sex}</li><li>年齡：{age+1}</li></ul>)}}//渲染組件到頁面ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的React对标签属性进行限制(props)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2021十佳笔记本电脑配置？
- 下一篇： 玩《绝地求生》笔记本要求什么配置？