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：验证父组件传值的类型合法性

最后的结果为：

巴特西

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

最新文章

热门文章