組件實(shí)對(duì)象3大屬性之一：props屬性
- 1.每個(gè)組件對(duì)象都會(huì)有props（properties的簡(jiǎn)寫(xiě)）屬性
- 2.組件標(biāo)簽的所有屬性都保存在props中
- 3.內(nèi)部讀取某個(gè)屬性值：this.props.propertyName
- 4.作用：通過(guò)標(biāo)簽屬性從組件外 向組件內(nèi)傳遞數(shù)據(jù)（只讀 read only）
- 5.對(duì)props中的屬性值進(jìn)行類(lèi)型限制和必要性限制
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}
- 6.擴(kuò)展屬性：將對(duì)象的所有屬性通過(guò)props傳遞
<Person {...person}/>
- 7.默認(rèn)屬性值
Person.defaultProps = {
name: 'Mary'
};
- 8.組件類(lèi)的構(gòu)造函數(shù)
constructor (props) {
super(props);
console.log(props); // 查看所有屬性
}
問(wèn)題：為什么要設(shè)計(jì)對(duì)prop進(jìn)行約束的語(yǔ)法刃麸？
下面來(lái)記錄一個(gè)簡(jiǎn)單的例子：
需求：自定義用來(lái)顯示一個(gè)人員信息的組件, 效果如頁(yè)面. 說(shuō)明
1). 如果性別沒(méi)有指定, 默認(rèn)為男
2). 如果年齡沒(méi)有指定, 默認(rèn)為18
class Person extends React.Component {
constructor(props) {
super(props);
console.log(props); //查看所有屬性
}
render() {
return (
<ul>
<li>姓名: {this.props.name}</li>
<li>性別: {this.props.sex}</li>
<li>年齡: {this.props.age}</li>
</ul>
);
}
}
Person.propTypes = {
name: React.PropTypes.string.isRequired,
sex: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
};
Person.defaultProps = {
sex: '男',
age: 18
};
/************************************************************************/
//初始化數(shù)據(jù)
let person = {name: 'atguigu', sex: '女', age: 3};
// person = { name: 'atguigu', sex: '女', age: "3" }; // 會(huì)拋出警告age不是number類(lèi)型的
//根據(jù)數(shù)據(jù)動(dòng)態(tài)渲染組件標(biāo)簽
/*ReactDOM.render(<Person name={person.name} age={person.age} sex={person.sex}/>,
document.getElementById('example'));*/
ReactDOM.render(<Person {...person}/>,
document.getElementById('example'));
const person2 = {name: 'kobe', sex: '女'};
ReactDOM.render(<Person {...person2}/>, document.getElementById('example2'));
組件拆分
/*
1. 拆分組件: 拆分界面, 抽取組件
* 單個(gè)標(biāo)題組件: Welcome
* 應(yīng)用組件: App
2. 分析確定傳遞數(shù)據(jù)和數(shù)據(jù)類(lèi)型
* Welcome: props.name string
* App: props.names array
*/
//定義內(nèi)部標(biāo)題組件
class Welcome extends React.Component {
render() {
return <h2>Welcome {this.props.name}!</h2>;
}
}
Welcome.propTypes = {
name: React.PropTypes.string.isRequired
};
//定義外部應(yīng)用組件
class App extends React.Component {
render() {
return (
<div>
{
this.props.names.map(
(name, index) => <Welcome name={name} key={index}/>
)
}
</div>
);
}
}
App.propTypes = {
names: React.PropTypes.array.isRequired
};
/**********************************************************/
var names = ['Tom', 'Jack', "Bob"];
ReactDOM.render(<App names={names}/>, document.getElementById('example'));
