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


六眼飞鱼酱① 提交于 2020-01-14 23:11:41

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
    }

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

工具导航Map