React入门---属性(props)-8

Posted 2020-09-18 阿泽大大

Props 和 State对于组件Component是非常重要的两个属性。

区别：State对于模块来说是 自身属性；

　　   Props对于模块来说是 外来属性；

同样的，props也是只作用于当前的组件，绝不影响其他组件；

给组件 <ComponentFooter> 添加props属性和属性值；

例：从父组件index.js给子组件footer.js传送数据：

class Index extends React.Component{
    render(){
        return(
            //里面分别是 头部 主体 底部
            <div>
                <ComponentHeader/>
                <BodyIndex/>
                {/*在这里给footer组件，添加props外来属性，不会影响其他组件*/}       
                <ComponentFooter userId={123456}/> 
            </div>
            );
    }
}

然后在footer组件里面，通过props属性来接收；

export default class ComponentFooter extends React.Component{
    render(){
        return(
                <div>
                    <h1>这里是底部</h1>
                    {/*props接收来自index.js的信息，在页面显示*/}
                    <p>{this.props.userId}</p> 
                </div>
            )
    }

运行之后，页面会显示出来123456；