提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

React--9: 组件的三大核心属性2:props与构造器

组件
2023-02-25 18:16:21 时间

这是我参与8月更文挑战的第16天，活动详情查看:8月更文挑战

1. 添加构造器

上一篇文章的例子，更改一下，添加构造器。当然，这个构造器写不写都可以

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import './index.css';

class Person extends React.Component{
    constructor(props){
        console.log(props)
        super(props)
    }
    static propTypes = {
        name :PropTypes.string.isRequired,
        sex : PropTypes.string,
        age : PropTypes.number.isRequired,
    }
    static defaultProps = {
        name : "tom",
        age:18,
        sex:"boy"
    }
    render(){
        const {name,sex,age} = this.props
    
        return(
            <ul>
                <li>
                    姓名 ：{name}
                </li>
                <li>
                    性别 ：{sex}
                </li>
                <li>
                    年龄：{age+1}
                </li>
            </ul>
        )
    }
    
}
ReactDOM.render(<Person name="bob"  />, document.getElementById('root'))

思考几个问题

props 传给super和不传的区别

在 React 组件挂载之前，会调用它的构造函数。在为 React.Component 子类实现构造函数时，应在其他语句之前前调用 super(props)。否则，this.props 在构造函数中可能会出现未定义的 bug。

构造器 是否接受 props，是否传给 super ，取决于：是否希望在构造器中通过this 访问 props。

类中的构造器有什么作用呢

通常，在 React 中，构造函数仅用于以下两种情况：

  • 通过给 this.state 赋值对象来初始化内部 state。
  • 为事件处理函数绑定实例，即对自定义函数的 bind。

类中的构造器，能省略就省略。

2. 函数式组件使用props

组件实例的三大属性，类组件才有实例（this）。

但是函数组件具有 props。

现在，函数内部接收不到实例 this 了，那怎么办呢？虽然函数接收不到 this ，但是函数可以传参数。

function Person(props){
    const {name,sex,age} = props
    console.log(props)
        return(
            <ul>
                <li>
                    姓名 ：{name}
                </li>
                <li>
                    性别 ：{sex}
                </li>
                <li>
                    年龄：{age+1}
                </li>
            </ul>
        )
}
ReactDOM.render(<Person name="bob"  age={12} sex="girl" />, document.getElementById('root'))

可以看到我们打印出了 props

那怎么做限制呢？ 限制只能写在函数的外面，并且不能再用static关键字了，因为那是类中才有的关键字。 使用Person.

function Person(props){
    const {name,sex,age} = props
    console.log(props)
        return(
            <ul>
                <li>
                    姓名 ：{name}
                </li>
                <li>
                    性别 ：{sex}
                </li>
                <li>
                    年龄：{age+1}
                </li>
            </ul>
        )
}
      Person.propTypes = {
            name :PropTypes.string.isRequired,
            sex : PropTypes.string,
            age : PropTypes.number.isRequired,
        }
        Person.defaultProps = {
            name : "tom",
            age:18,
            sex:"boy"
        }

总结

理解

每个组件对象都会有props属性

组件标签的所有属性都保存在props中

作用

通过标签属性从组件外向组件内传递变化的数据

组件内部不要修改数据

相关文章