011.組件實例三大屬性之props

引入

相似state，props也是爲組件提供數據來源的方式，不一樣的是state是本身定義數據，props是接受組件外部數據。javascript

直接上🌰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    
    <script type="text/babel"> // 1.建立組件 class Person extends React.Component{ render(){ console.log(this) const {name,sex,age} = this.props return ( <ul> <li>姓名：{name}</li> <li>性別：{sex}</li> <li>年齡：{age}</li> </ul> ) } } ReactDOM.render(<Person name="jerry" sex="男" age="20"/>,document.getElementById('test')) </script>
</body>
</html>
複製代碼

批量傳遞多組標籤屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    
    <script type="text/babel"> // 1.建立組件 class Person extends React.Component{ render(){ console.log(this) const {name,sex,age} = this.props return ( <ul> <li>姓名：{name}</li> <li>性別：{sex}</li> <li>年齡：{age}</li> </ul> ) } } const p = {name:'老王頭',sex:'男',age:'76'} ReactDOM.render(<Person name="jerry" sex="男" age="20"/>,document.getElementById('test')) //批量傳遞多組標籤屬性 ReactDOM.render(<Person {...p}/>,document.getElementById('test')) </script>
</body>
</html>
複製代碼

限制傳入的數據格式

在對數據格式進行限制時須要引入React資源包
<script type="text/javascript" src="../js/prop-types.js"></script>html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/javascript" src="../js/prop-types.js"></script>
    
    <script type="text/babel"> // 1.建立組件 class Person extends React.Component{ render(){ console.log(this) const {name,sex,age} = this.props // this.props.name = 'jack' 會報錯 由於props是隻讀的 return ( <ul> <li>姓名：{name}</li> <li>性別：{sex}</li> <li>年齡：{age}</li> </ul> ) } } // 需求：對props傳入的對象進行數據格式限制 // 對標籤屬性進行類型、必要性的限制 Person.propTypes = { name:PropTypes.string.isRequired, //字符串&必填 age:PropTypes.number, //數值 sex:PropTypes.string, //數值 speak:PropTypes.func //限制speak爲函數 } // 制定默認標籤屬性值 Person.defaultProps = { sex:'男', age:1 } ReactDOM.render(<Person name="jerry" sex="男" age="20"/>,document.getElementById('test')) const p = {name:'老王頭',sex:'男',age:'76'} //批量傳遞多組標籤屬性 ReactDOM.render(<Person {...p}/>,document.getElementById('test')) </script>
</body>
</html>
複製代碼

閱讀代碼依然能發現propTypes、defaultProps是給Person實例裏的屬性賦值，顯然這能夠在Person類裏直接寫賦值語句來省略Person.java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <div id="test1"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/javascript" src="../js/prop-types.js"></script>
    
    <script type="text/babel"> // 1.建立組件 class Person extends React.Component{ // 需求：對props傳入的對象進行數據格式限制 static propTypes = { name:PropTypes.string.isRequired, //字符串&必填 age:PropTypes.number, //數值 sex:PropTypes.string, //數值 speak:PropTypes.func //限制speak爲函數 } // 制定默認標籤屬性值 static defaultProps = { sex:'男', age:1 } render(){ console.log(this) const {name,sex,age} = this.props // this.props.name = 'jack' 會報錯 由於props是隻讀的 return ( <ul> <li>姓名：{name}</li> <li>性別：{sex}</li> <li>年齡：{age}</li> </ul> ) } } ReactDOM.render(<Person name={100} sex="男" age="20"/>,document.getElementById('test')) const p = {name:'老王頭',sex:'男',age:'76'} //批量傳遞多組標籤屬性 ReactDOM.render(<Person {...p}/>,document.getElementById('test1')) </script>
</body>
</html>
複製代碼

看看效果
啊奇妙的知識react