React 从入门到进阶之路（八）

之前的文章我们介绍了 React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法。接下来我们将介绍 React propTypes  defaultProps。

  之前我们已经根据 create-react-app 模块创建了一个 React 项目，并定义 App.js 为根组件，即父组件，Home.js 为子组件。我们看一下两个组件的代码：

App.js

import React, {Component} from 'react';
import Home from './components/Home';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: "I am father",
            age: 30,
            info: "I like React",
        }
    }

    render() {
        return (
            <div className="App">
                <Home title={this.state.title} age={this.state.age}/>
            </div>
        );
    }
}

export default App;

Home.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "zhangsan",
        }
    }

    render() {
        return (
            <div>
                <p>Hello {this.state.name}</p>

                {/*父组件将 title 传过来*/}
                {/*输出结果：I am father*/}
                <p>{this.props.title}</p>

                {/*父组件将 age 传过来，在下面的 defaultProps 中再重新定义*/}
                {/*父组件将 age 传过来，在下面的 propTypes 定义 age 必须为 number 类型*/}
                {/*输出结果：30*/}
                <p>{this.props.age}</p>

                {/*父组件没有将 info 传过来，在下面的 defaultProps 中定义*/}
                {/*输出结果：I like React too*/}
                <p>{this.props.info}</p>
            </div>
        );
    }
}

Home.defaultProps = {
    age: 60,
    info: "I like React too",
}

Home.propTypes = {
    age: PropTypes.number
}

export default Home;

在父组件 App.js 中，通过 <Home /> 将子组件 Home 挂载到父组件 App 上，然后将 title 和 age 传递给子组件。

在子组件 Home 中，我们通过 this.props 属性来获取父组件 App 传递过来的值，但是我们在子组件 Home 中定义了一个 defaultProps 属性，并声明了 age 和 info 变量。

在输出结果中我们可以看出：

　　如果在子组件的 defaultProps 属性中没有更改父组件传递过来的值，那么将按父组件传递过来的值输出，

　　如果在子组件的 defaultProps 属性中更改了父组件传递过来的值，那么还是按父组件传递过来的值输出，

　　如果父组件并没有传递过来某值，但是在子组件的 defaultProps 属性中定义了该值，那么将按照定义的值输出。

在子组件 Home 中我们还通过 import PropTypes from ‘prop-types’; 引入了 PropTypes 模块，并定义了一个 propTypes 属性定义了一个 age: PropTypes.number 的约束，那么如果父组件传递过来的 age 如果不是 number 类型的话，则会在控制台报错。

结论：

defaultProps:父子组件传值中，如果父组件调用子组件的时候不给子组件传值，可以在子组件中使用defaultProps定义的默认值

propTypes：验证父组件传值的类型合法性

最后的结果为：