React17 父子组件传值，函数、和类的子组件接收区别
先上主的import './App.css';
import Hdeder from './page/header/header';
import React from 'react';
import Footer from './page/footer/footer';
// function App() {
// return (
// <div className="App">
// <h1>主页</h1>
// <Hdeder name={'王三岁'}age={'29'} ></Hdeder>
// </div>
// );
// }
// 问题组件渲染两遍
class App extends React.Component{
render(){
return (
<section>
主页
{/* <Hdeder name={'王三岁'}age={'29'} ></Hdeder> */}
<Hdedername={'王三岁'}age={29} />
<Footername={'孔大力'}age={31}></Footer>
</section>
)
}
}
export default App;
上函数类型接收传参
import React from "react";
// import { ReactPropTypes } from "react";额 这个哪来的
import ReactType from "prop-types";
function Hdeder(props){
console.log(props)
return (
<h1> 我认识 {props.name} 那年， 她 {props.age} 岁 </h1>
)
}
// 1. 设置传参的默认值
Hdeder.defaultProps={
name:'张三',
age:78
}
// 2.在子组件中 如何校验参数类型
// 通过propTypes 需要安装npm install prop-types
Hdeder.propTypes={
name: ReactType.string ,
age:ReactType.number
}
export default Hdeder; 上类接收传参
import React from "react";
import ReactType from "prop-types";
class Footer extends React.Component{
constructor(props){
super();
this.props = props;
}
render(){
return (
<section>
{this.props.name} 真俊
</section>
);
}
// 1、设置默认值
static defaultProps ={
name:'张三',
age:78
}
// 2.验证传递参数的类型
static propTypes = {
name: ReactType.string ,
age:ReactType.number
}
}
export default Footer;
页:
[1]