React組件三大屬性之 props
理解
1) 每個組件對象都會有props(properties的簡寫)屬性
2) 組件標簽的所有屬性都保存在props中
作用
1) 通過標簽屬性從組件外向組件內傳遞變化的數據
2) 注意: 組件內部不要修改props數據
編碼操作
1) 內部讀取某個屬性值
this.props.propertyName
2) 對props中的屬性值進行類型限制和必要性限制
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}
3) 擴展屬性: 將對象的所有屬性通過props傳遞
<Person {...person}/>
4) 默認屬性值
Person.defaultProps = {
name: 'Mary'
}
5) 組件類的構造函數
constructor (props) {
super(props)
console.log(props) // 查看所有屬性
}
問題: 請區別一下組件的props和state屬性
1) state: 組件自身內部可變化的數據
2) props: 從組件外部向組件內部傳遞數據, 組件內部只讀不修改
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
</head>
<body>
<div id="test1"></div>
<hr>
<div id="test2"></div>
<script type="text/babel">
/*
需求: 自定義用來顯示一個人員信息的組件, 效果如頁面. 說明
1). 如果性別沒有指定, 默認為男
2). 如果年齡沒有指定, 默認為18
*/
//1、定義組件
function Person(props) {
return (
<ul>
<li>姓名: {props.name}</li>
<li>性別: {props.sex}</li>
<li>年齡: {props.age}</li>
</ul>
)
}
// 指定屬性的默認值
Person.defaultProps = {
sex: '男',
age: 18
}
//指定屬性值和類型的必要性
Person.propTypes={
name: PropTypes.string.isRequired,
age: PropTypes.number
}
//定義一個person
const person = {
name: 'Tom',
sex: '女',
age: 18
}
const person2 = {
name: 'jack'
}
//2、渲染組件標簽
ReactDOM.render(<Person {...person}/>,document.getElementById('test1'))
ReactDOM.render(<Person name={person2.name} />,document.getElementById('test2'))
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
</head>
<body>
<div id="test1"></div>
<hr>
<div id="test2"></div>
<script type="text/babel">
/*
需求: 自定義用來顯示一個人員信息的組件, 效果如頁面. 說明
1). 如果性別沒有指定, 默認為男
2). 如果年齡沒有指定, 默認為18
*/
//1、定義組件
class Person extends React.Component {
render() {
console.log(this)
return (
<ul>
<li>姓名: {this.props.name}</li>
<li>性別: {this.props.sex}</li>
<li>年齡: {this.props.age}</li>
</ul>
)
}
}
// 指定屬性的默認值
Person.defaultProps = {
sex: '男',
age: 18
}
// 對標簽屬性進行限制
Person.propTypes = {
name: PropTypes.string.isRequired,
sex: PropTypes.string,
age: PropTypes.number
}
//定義一個person
const person = {
name: 'Tom',
sex: '女',
age: 18
}
const person2 = {
name: 'jack'
}
//2、渲染組件標簽
ReactDOM.render(<Person {...person}/>,document.getElementById('test1'))
ReactDOM.render(<Person name={person2.name} />,document.getElementById('test2'))
</script>
</body>
</html>