03.React Props和state以及插件对Props数据类型的规范
1.index.js中传参数
function App(props) {
return (
<div>
<MyHeader title="头部标题"></MyHeader> //这里的title传递给header组件
{props.title}
<MyFooter></MyFooter>
</div>
);
}
ReactDom.render(<App title="好个锤子啊!" />, document.getElementById("root"));
另外2种类型的参数传递
2.header.js中接收参数
export default class header extends Component {
constructor(props) {
super(props);
this.title = props.title;
this.state = {
date: new Date().toLocaleDateString(),
mytitle: props.title
};
}
render() {
return (
<div style={headerStyle}>
<p>
我来组成头部 {this.state.mytitle} {this.state.date}
</p>
</div>
);
}
}
注意:
1.在constructor中props接收数据,再用state存到当前组件,要加superprops()
2.state表示自身数据,可以通过生命周期函数调用来更新
3.对props数据类型的规范
3.1安装 npm install --save prop-types
3.2在需要的地方导入
import PropTypes from "prop-types";
3.3使用
static propTypes={
age:PropTypes.string
}
有效果但是会报错
改成number类型
static propTypes={
age:PropTypes.number
}
3.4常用数据类型