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: '哈哈哈'
}