react 子与父组件之间的通讯传递

1.父文件中 如：index.js
class App extends Component 部分：

constructor(){
        super();
    }

render部分：

 render(){
        return (
            <div>
                <Header userage={18}></Header>
                <Content></Content>
                <Footer></Footer>
            </div>
            
        )
    }

注意：Header标签中的 userager={18}为父传给子的参数

Header.js中
export default class Header extends Component 部分：

constructor(props){
        super(props);
        this.userage = props.userage
        this.state.username = "lili"
    }

render中

  render() {
        return (
            <div>
                头部{this.userage}
                用户名{this.state.username}
            </div>
        )
    }

运行结果：

注意：关于props类型的设置
下载插件：npm install --save prop-types;
引入插件：import PropTypes from ‘prop-types’;
在要使用的地方设置

class Header extends Component{
    static propTypes={
        title:PropTypes.string
    }

设置他的参数类型 如果类型不一致 控制台报错 但是页面会有显示

来源：CSDN

作者：qq_45227126

链接：https://blog.csdn.net/qq_45227126/article/details/103980145