03.React Props和state以及插件对Props数据类型的规范

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常用数据类型