React(2)

1.1.react 组件传值

在组件实例中使用props属性进行传递  通过调props属性来进行取值   (props 为只读属性不能修改)

父组件

import React, { Component } from 'react'; //引入react 首字母必须大写
import Dome1 from "./components/dome1/index"

class Login extends Component { //创建一个 ClickMe的类，继承与Component 【注】组件名首字母必须大写
    
    render() { //react里的一个生命周期，用于渲染dom
        return ( //return 里写的是jsx代码，和html基本一致
            <div>
                <Dome1 name="51616"/>
            </div>
        )
    }

}
export default Login;

 子组件

import React, { Component } from 'react';
class Dome1 extends Component {

    render() {
        return (
            <div>
                <h1>{this.props.name}</h1>
            </div>
        )
    }

}
export default Dome1;

1.2 组件传值限制类型

引入PropTypes 包  npm i prop-types  安装包 然后引入

import PropTypes from 'prop-types'

 使用   inRequired  表示为必传   

传入函数的限制  是func  而不是function    因为function 是一个关键字 而非类型

tatic propTypes = {
        name: PropTypes.string.isRequired // 表示必传
        age: PropsType.number, // 非必传的数字
        vulgarTycoon: PropsType.boolean // 非必传的布尔值
        method: PropTypes.func // 表示传入的是一个函数;
      }

1.3 组件传值设置默认值  通过defaultProps  来设置默认值

static defaultProps = {
        name: '哈哈哈'
    }