类式组件中的props

1.类式组件中props基本使用

// 1. 创建类式组件
class Person extends React.Component {
    render() {
            let {name, age, sex} = this.props
            return (
            <ul>
            <li>姓名: {name}</li>
            <li>性别: {sex}</li>
            <li>年龄: {age}</li>
            </ul>
        )
    }
}
// 2. 渲染组件到页面
ReactDOM.render(<Person name="Tom" sex="女" age="18" />,document.getElementById('test'))

1.在使用组件的地方，传入参数或方法作为组件属性
2.在组件内部，通过this.props接收参数
$\color{red}test$

2.批量传递props

let p = {name: 'Lili', age: 18, sex: '女'}
ReactDOM.render(<Person {...p} />, document.getElementById('test'))

批量传递数据可以使⽤展开运算符展开对象。
需要注意的时候, 在原⽣js中, 展开运算符不能展开对象。在原⽣JS中, 可以包裹⼀层 {} 在 {} ⾥⾯展开对象, 但这并不是⼀个展开操作, ⽽是在复制⼀个对象, 或者是在合并对象

let person = {name: '张三', age: 18}
let p1 = ...person; // 这种写法是错误的
let p2 = {...person} // 这种写法是对的，这是在复制一个对象

在react中, 由于有react核⼼库和babel的存在, 所以可以展开对象, 但仅仅只能作为组件传递props使⽤, 不能⽤于输出。在react中展开对象的时候, 外⾯包裹的 {} 仅仅是⼀个分隔符, 不是原⽣js中复制对象⽤的包裹

let p = {name: 'Lili', age: 18, sex: '女'}
// 此处的{}仅仅是⼀个分隔符，而不是原⽣js中复制对象⽤的包裹
ReactDOM.render(<Person {...p} />, document.getElementById('test'))

3.对props进⾏限制

需要使⽤ propTypes 对象, 在react 15版本中, propTypes 对象是 React 对象的⼀个属性。但是为了不让 React看起来那么臃肿, 在react 16就把 propTypes 拆分成独⽴的模块了, 需要单独引⼊:

<script src="../js/prop-types.js"></script>

对组件中的props进⾏类型限制:

// 对标签属性类型进行限制
Person.propTypes = {
    name: PropTypes.string.isRequired,
    sex: PropTypes.string,
    age: PropTypes.number
}

string / number ⼩写是为了和 String / Number 避开, 如果要限制函数类型, 不能直接写 function, 因为function 是关键字, 要使⽤ func

4.给标签属性默认值:

// 指定默认标签属性值
Person.defaultProps = {
    sex: '保密',
    age: 18
}

5.props简写方式

static 关键字可以给类本身添加属性和⽅法

class Person extends React.Component {
    // 对标签属性类型进行限制
    static propTypes = {
        name: PropTypes.string.isRequired,
        sex: PropTypes.string,
        age: PropTypes.number
    }
    // 指定默认标签属性值
    static defaultProps = {
        sex: '保密',
        age: 18
    }
    render() {
        let {name, age, sex} = this.props
        return (
        <ul>
        <li>姓名: {name}</li>
        <li>性别: {sex}</li>
        <li>年龄: {age}</li>
        </ul>
        )
    }
}

6.类式组件中的构造器与props

constructor(props) {
   // 构造器是否接收props, 是否传递给super, 取决于:是否希望在构造器中通过this访问props
    super(props);
    console.log('constructor', this.props)
}

函数式组件使⽤props

因为函数式组件没有this, 所以不能使⽤state和refs, 但是函数式组件可以传参, 所以可以使⽤props。
注：函数式组件在最新版本的hooks才可以使⽤state

function Person (props) {
    let {name, age, sex} = props
    return (
            <ul>
                <li>姓名: {name}</li>
                <li>性别: {sex}</li>
                <li>年龄: {age}</li>
            </ul>
        )
    }
    // 对标签属性类型进行限制
    Person.propTypes = {
        name: PropTypes.string.isRequired,
        sex: PropTypes.string,
        age: PropTypes.number
    }
    // 指定默认标签属性值
    Person.defaultProps = {
        sex: '保密',
        age: 18
    }
ReactDOM.render(<Person name="Tom" />, document.getElementById('test'))

总结

组件标签属性可以使⽤ {...Data} 批量传递
组件属性传递的数据, 如果是类组件, 就被实例的props属性收集, 如果函数组件, 就被函数的props参数接收
对props的数据可以加⼀些限制, 但这并不是必须必须的, 如果要加⼀下限制, 可以给组件设置 propTypes 属性, 他的值是对象, 可以对每⼀个字段进⾏限制
对props的数据进⾏限制, 需要引⼊额外的 ProTypes 插件, 该插件提供了全局的 ProTypes 对象, 可以使⽤这个对象的⼀些属性, 对props数据进⾏⼀些限制
如果要给propo默认值, 要设置组件的 defaultProps 属性
简写⽅式就是在类式组件⾥⾯定义 propTypes 和 defaultProps 属性, 需要使⽤ static 关键字, 因为这个属性应该是类本身的属性, ⽽不是实例的属性

五、React学习笔记整理（props）