React入门---可复用组件-10

Posted 2020-09-18 阿泽大大

主要对props更多重要的特性进行学习;

还是用之前代码，

index.js代码为：

var React = require(‘react‘);
var ReactDOM = require(‘react-dom‘);
import ComponentHeader from ‘./components/header‘; 
import ComponentFooter from ‘./components/footer.js‘;
import BodyIndex from ‘./components/BodyIndex.js‘;

class Index extends React.Component{
    render(){
        return(
            <div>
                <ComponentHeader/>
                <BodyIndex/>
                {/*在这里给footer组件，添加props外来属性*/}       
                <ComponentFooter userid={123456}/> 
            </div>
            );
    }
}
//与app.html进行一个绑定 
ReactDOM.render(<Index/>,document.getElementById(‘test‘));

footer.js的代码为：

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;

export default class ComponentFooter extends React.Component{
    constructor(){
        super();
        this.state = {
            username:"azedada",
            age:24
        }
    }

    render(){
        return(
                <div>
                    <h1>这里是底部</h1>
                    <p>接收到父页面的属性：{this.props.userid}</p> 
                </div>
            )
    }

}

1.判断类型

现在我们需要对父页面传来的 userId进行 类型判断，只能接受number类型的：

由于React.PropTypes不再适用于React v15.5,改用prop-types库，我们进行配置npm install prop-types -D

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
//引用prop-types
import PropTypes from ‘prop-types‘;

export default class ComponentFooter extends React.Component{

    render(){
        return(
                <div>
                    <h1>这里是底部</h1>
                    {/*接收的userId只能为number类型*/}
                    <p>接收到父页面的属性：{this.state.username}:{this.state.age},{this.props.userid}</p> 
                </div>
            )    
    };    
}
    //对类型的判断,es6的写法
    //注意：React.PropTypes不再适用于React v15.5,改用prop-types库; npm install prop-types -D
    ComponentFooter.propTypes={
            userid:PropTypes.number
        }

运行结果：如果userid为number类型则正常，如果为其他类型则报错；

2.当其他人通过父页面调用子页面，忘记传userid了，但是我们需要他必须传，这时候需要用到isRequired属性

(下面代码就在上面基础上直接修改)

//对类型的判断,es6的写法
    //注意：React.PropTypes不再适用于React v15.5,改用prop-types库; npm install prop-types -D
    ComponentFooter.propTypes={
            userid:PropTypes.number.isRequired
        }

运行结果：如果userid存在则正常，如果没有则会发出warning警告;

3.如果父页面还有一个username，它不强制必须有，我们可以给它一个默认值，下面是footer.js的代码

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
//引用prop-types
import PropTypes from ‘prop-types‘;


//给父页面username的值赋一个默认值
const defaultProps={
    username:"这是一个默认值"
}


export default class ComponentFooter extends React.Component{
    constructor(){
        super();
        this.state = {
            username:"azedada",
            age:24
        }
    }

    //事件函数 改变state的age
    changeAge(){
        this.setState({age:18})
    }

    render(){
        return(
                <div>
                    <h1>这里是底部</h1>
                    <p>{this.state.username}:{this.state.age}</p> 
                    {/*接收的userId只能为number类型*/}
                    <p>接收到父页面的属性：{this.props.userid},{this.props.username}</p>
                    {/*这里写点击事件，注意写法是es6*/}
                    <input type="button" value="点击改变年龄" onClick={this.changeAge.bind(this)}/>
                </div>
            )    
    };    
}
    //对类型的判断,es6的写法
    //注意：React.PropTypes不再适用于React v15.5,改用prop-types库; npm install prop-types -D
    ComponentFooter.propTypes={
            userid:PropTypes.number.isRequired
        }
    //对username赋默认值
    ComponentFooter.defaultProps=defaultProps;    

运行结果：如果父页面index.js没有传username，则会显示"这是一个默认值"，如果传入了"内容"，则被"内容"替换;

4.父页面传入的所有数据，注意是所有数据，子页面接收到后，继续传给子页面的子页面；即index.js--->footer.js--->footchild.js；

首先创建footchild.js文件，然后引入到父页面footer.js，相信到这里，大家都能自己完成这一步;

{/*下面是子页面footchild*/}{/*{...this.props} 可以把父页面所有的属性收到，并且可以自己定义*/}
 <FootChild {...this.props} id={2121}/>

在FootChild组件里面调用出来：既能调用根父级index里面有的，也能调用在自己父级定义的;

import React from ‘react‘;

export default class FootChild extends React.Component{
    render(){
        return(
                <div>
                    {/*既能调用根父级index里面有的，也能调用在自己父级定义的*/}
                    <p>{this.props.username} {this.props.userid} {this.props.id} </p>
                    }
                </div>
            )
    }
}

总结：