React 三大组件核心属性之 props

• 每个组件都有会有自己的 props(properties)属性
• 组件标签的所有属性都保存在 props 中
• 通过标签属性从组件外向组件内传递变化的数据

模拟需求

• 自定义用来显示一个人员信息的组件
  • 姓名必须指定， 且为字符串类型
  • 性别为字符串类型，如果性别没有指定，默认为男
  • 年龄必须指定，且为数字类型

初步实现

class Person extends React.Component {
    render() {
        const { name, age, sex } = this.props
        return (
            <ul>
                <li>姓名：{name}</li>
                <li>性别：{sex}</li>
                <li>年龄：{age}</li>
            </ul>
        )
    }
}
ReactDOM.render(<Person name="jerry" age="19" sex="女" />, document.getElementById("text"));

react 会将标签属性收集到 props 里面

传递一个对象到标签属性中

const obj = {
    name: "jerry",
    age: "19",
    sex: "女"
}
// ReactDOM.render(<Person name={obj.name} age={obj.age} sex={obj.sex} />, document.getElementById("text"));
ReactDOM.render(<Person {...obj} />, document.getElementById("text"));

react + babel 可以用展开运算符展开对象，但是只适用于标签属性的传递
对象的 key 值和你组件的 key 值要保持一致

对 props 进行限制和设置默认值

• React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库。
• 引入 prop-types，用于对组件标签属性进行限制
  <script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>

// 对标签属性进行类型、必要性的限制
Person.propTypes = { 
    name: PropTypes.string.isRequired, // 限制 name 必传，且为字符串
    sex: PropTypes.string, // 限制 sex为字符串
    age: PropTypes.string // 限制 age为数字
}
 // 指定默认标签属性值
Person.defaultProps = {
    sex: '不男不女', // sex默认值为男
    age: 18 // age默认值为18
}
ReactDOM.render(<Person name="jerry" age="19" sex="女" />, document.getElementById("text"));

函数限制中，function 是关键字，用 func 代替
props 是只读的，不可修改

对 props 的简写方式

class Person extends React.Component {
    // 对标签属性进行类型、必要性的限制
    static propTypes = {
        name: PropTypes.string.isRequired, // 限制 name 必传，且为字符串
        sex: PropTypes.string, // 限制 sex为字符串
        age: PropTypes.string // 限制 age为数字
    }
    
    // 指定默认标签属性值
    static defaultProps = {
        sex: '不男不女', // sex默认值为男
        age: 18 // age默认值为18
    }
    render() {
        // 收集标签属性放到 props 里面
        const { name, age, sex } = this.props
        return (
            <ul>
                <li>姓名：{name}</li>
                <li>性别：{sex}</li>
                <li>年龄：{age}</li>
            </ul>
        )
    }
}
ReactDOM.render(<Person name="jerry" age="19" sex="女" />, document.getElementById("text"));

函数组件使用 props

• 利用函数可以传递参数的特点

function Person(props) {
    const { name, age, sex } = props
    return (
        <ul>
            <li>姓名：{name}</li>
            <li>性别：{sex}</li>
            <li>年龄：{age}</li>
        </ul>
    )
}
// 对标签属性进行类型、必要性的限制
Person.propTypes = {
    name: PropTypes.string.isRequired, // 限制 name 必传，且为字符串
    sex: PropTypes.string, // 限制 sex为字符串
    age: PropTypes.string // 限制 age为数字
}
// 指定默认标签属性值
Person.defaultProps = {
    sex: '不男不女', // sex默认值为男
    age: 18 // age默认值为18
}
ReactDOM.render(<Person name="jerry" age="19" sex="女" />, document.getElementById("text"));

更多的验证器

MyComponent.propTypes = {
    // 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的
   optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,
 
    // 可以被渲染的对象 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,
 
    //  React 元素
    optionalElement: React.PropTypes.element,
 
    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),
 
    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
 
    // 可以是多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),
 
    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
 
    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
 
    // 特定 shape 参数的对象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),
 
    // 任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,
 
    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,
 
    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  }
}