六、props进阶

一、children属性

• children属性表示组件标签的子节点
• 当组件标签有子节点时，接受传值的子组件中的props里就会有该属性
• 与普通的props一样，其值可以是任意类型
• 注意
  • 如果子组件标签里只存在一个子节点，则children属性值为一个字符串
  • 如果子组件标签里存在多个子节点，那么children属性的值为一个索引数组
• children这种写法是父传子的另一种写法，原先父传子是将值写在了组件标签的属性中，只不过现在写在了组件标签里而已

例如，有父组件代码

import React, { Component } from 'react';
import Cmp from './Components/Cmp';

class App extends Component{
  state = {
    content: '我是state内容'
  }
    renter() {
    // this.state.content即为子组件标签中的子节点
    return <Cmp>{this.state.content}</Cmp>
  }
}
export default App;

子组件代码

// 子组件的props属性里就存在一个children属性，可以获取到父组件传入的内容
import React, { Component } from "react";

class Cmp extends Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}
export default Cmp;

二、prop-types

关于JavaScript的class中的静态成员与常规成员

class App {
  static uname = '张三'
    age = 20
}
// 常规的属性是在对象里的，如果要用得先实例化
console.log((new App).age);  // 20
console.log((new App).uname);  // undefined

// 静态属性是类里面的，使用的时候不要实例化
console.log(App.uname);  // 张三

// 静态成员要优先于常规的成员

　　React是为了构建大型应用程序而生，在一个大型应用开发过程中会进行多人协作，往往可能根本不知道别人使用你写的组件的时候会传入什么样的参数，这样就有可能会造成应用程序运行不了但是又不报错的情况。所以必须要对于props设传入的数据类型进行校验

　　为了解决这个问题，React提供了一种机制，让写组件的人可以给组件的props设定参数检查，需要安装和使用prop-types：

npm i -S prop-types

在使用时，无论是函数组件还是类组件，都需要对prop-types进行导入：

// 注意PropTypes大小写，大驼峰
import PropTypes from "prop-types"

随后依据使用的组件类型选择对应的应用方式

函数组件

function App(props){
  // 函数组件声明过程
  return "";
}

// 为App方法组件挂上验证规则（注意大小写，小驼峰）
App.propTypes = {
  // 待验证的属性名：PropTypes.类型规则[.isRequired]
  // isRequired表示必传
  name: PropTypes.string.isRequired,
  age: PropTypes.number
  // ... 
}

类组件

class App extends Component{
  // 类内部完成检查（注意大小写，小驼峰）
  static propTypes = {
    name: PropTypes.string
  }
  // 渲染
  render() {
    return "";
  }
}

函数验证：func　　

本质上来上面类组件的写法与方法组件的写法是一样的，只不过考虑到类组件的代码完整性，我们把规则的验证做成了类的静态成员属性的方式，如果还原成最初的代码则如下：

class App extends Component {
  render() {
    return(
        <div>{this.props.flag}--{this.props.num}</div>
    )
  }
}

App.propTypes = {
  flag: PropTypes.string,
  num: PropTypes.number.isRequired,
};

需要注意，isRequired规则必须放在最后且不能独立于其他规则存在。更多的验证规则，可以参考React官网。

三、props的默认值

　　如果props有属性没有传来数据，为了不让程序异常，我们可以依据业务情况给对应的（子组件中）属性设置默认值。

函数组件

function App(props){
  // 函数组件声明过程
  return "";
}
// 为App方法组件挂上默认值
App.defaultProps = {
  // 属性名：默认值
  title: "标题",
  // ...
}

类组件

class App extends Component {
  // 添加静态成员属性`defaultProps`设置props的默认值
  static defaultProps = {
    // 属性名：默认值
    title: "标题"
    // ...
  }
}