024_类式组件中的构造器与

image-20210310094533007

image-20210310094711213

```javascript // TODO 创建组件 class Person extends React.Component { state = {name: 'tom', age: "18", sex: "女"}

constructor(props) {
    // 构造器 是否接受props,石佛语传递给super,取决于:
    // 1. 是否希望在构造器中通过this访问props
    // 但是这种情况及其少见
    super(props);
    // ??? 这个地方我传递给super()props属性
    // 构造器科协可不写
    console.log('constructor', this.props)
    // 如果我需要用this.props 也可以 直接props
    // props 有被传进来的,


}

// TODO 对标签属性进行类型,必要性的限制
static prototypes = {
    name: PropTypes.string.isRequired,    // 字符串 必须传
    sex: PropTypes.string,// 限制rex没说必传
    age: PropTypes.number,// 限制 age为数值
    speak: PropTypes.func,// 限制speak为函数
}
// TODO 指定默认标签属性值
static defaultProps = {
    sex: '男', // sex默认值为难
    age: 18  // 年龄 默认为18
}

render() {
    const {name, age, sex} = this.props
    // props 是只读的
    this.props.name = 'jack'    // 此行代码会报错,因为props是支队的
    // 从组建外部 来给他信息,也就是不能用state 来给他数据信息
    return (
        <ul>
            <li>姓名: {name}</li>
            <li>姓别: {sex}</li>
            <li>年龄: {age + 1}</li>
        </ul>
    )
    // <li>年龄: {age + 1}</li> 这个不算修改,只是一个运算,只有读的过程
}

}

// TODO 渲染组件到页面 ReactDOM.render(, document.getElementById('test1')) ```


results matching ""

    No results matching ""