如果你想要实现自己的梦想，就必须先拥有勇气去追求它。

1. React Props

属性 props 主要解决两个问题：复用性问题以及可以让组件之间通信。

属性 props 正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改（属性是描述性质、特点的，组件自己不能随意更改），但是你可以通过父组件主动重新渲染的方式来传入新的 props。

工程组件代码里面有 props 的简单使用，总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件 props 对象的键值。通过箭头函数创建的组件，需要通过函数的参数（形参）来接收 props：

（1） 在组件上通过 key=value 写属性，通过 this.props 获取属性，这样组件的可复用性提高了。

（2）注意在传参数时候，如果写成 isShow=”‘true” 那么这是一个字符串，如果写成 isShow={true} 这个是布尔值。

（3）对象传递可以通过 {…对象} 展开赋值，后面也可以加其它属性。

2. 属性默认值2.1）类组件

类组件使用 defaultProps 给组件设置属性默认值。

// Navbar 自定义组件// 默认属性值定义方法一：组件外部定义 - 不推荐Navbar.defaultProps = {  title: "默认标题"}// 默认属性值定义方法二：组件内部定义static defaultProps = {  title: "默认标题"}

2.2）函数式组件

函数式组件直接使用函数参数默认值来设置 props 默认值。也可以通过 Navbar.defaultProps 来设置默认值，不推荐。

3. 属性类型验证3.1）不做验证

直接通过 this.props 获取属性，不做任何验证。

3.2）prop-types

prop-types 是一个 React 属性校验库，使用如下：

import React, { Component } from 'react'import kvTypes from 'prop-types'// 状态只能内部自己使用，不能进行传递。属性是父组件传递过来的，this.props。export default class Navbar extends Component {  // 类属性定义方法二、类型验证  static propTypes = {    title: kvTypes.string,    showLeft: kvTypes.bool,    showRight: kvTypes.bool  }  render() {    // 属性解构    let { title, showLeft, showRight } = this.props    return (      
        { showLeft &&  }        navbar-{title}        { showRight &&  }          )  }}// 类属性定义方法一、类型验证// Navbar.propTypes = {//   title: kvTypes.string,//   showLeft: kvTypes.bool,//   showRight: kvTypes.bool// }

4. 函数式组件 Props

函数式组件 Props 是直接通过形式参数进行数据传递。参数验证和默认值只能通过 Navbar.propTypes 和 Navbar.defaultProps 设置。

import React from 'react'export default function Slidbar(props) {  return (    
Slidbar  )}

5. 插槽 slot

插槽（slot）是属性中的特殊属性，写法固定，能够在组件构建的时候向组件模版定义好的位置插入自定义的结构。插槽的作用可以总结为以下两点：

  • 能够使组件得到更好的复用；
  • 在一定程度减少父子通信；
import React, { Component } from 'react'class Child extends Component {  render() {    return (      
        Child        {/* 插槽 vue 叫 slot 属性中的特殊属性 */}        { this.props.children[2]}          )  }}export default class App extends Component {  render() {    return (      
                  {/* 这里 div 中的内容是不会展示的，App 在渲染的时候，解析到 Child 组件的时候，              Child 定义模版（上面定义）会替换掉下面构建的 Child 组件，这里加的 div 是不会被包裹显示的。               */}          {/* 这里定义的结构会被挂到一个特别的属性上面：children  */}          
组件中写内容1          
组件中写内容2          
组件中写内容3                  )  }}