项目实战中以组件化为主进行开发。
创建两个子组件(A,B)
import React, { Component } from "react";
class Leftbar extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<>
<div>左侧组件</div>
</>
);
}
}
export default Leftbar;
//假设这个是组件A,B
引入组件
//引入组件
import Leftbar from './components/Leftbar'
import Rightbar from './components/Rightbar';
挂载
<>
<Leftbar></Leftbar>
<div>根组件</div>
<Rightbar></Rightbar>
</>
//挂载的用法和html标签一致
注意:
组件引入
import leftbar from './components/Leftbar' 命名小写
组件的props
类组件存在自身维护的状态state,但是如果涉及组件化开发使用props属性进行传值。
props存在是为了解决组件间传值。
类组件中props的关系。
Component父类中存在:
extends继承之后class类组件中可以使用this.props访问props传值。
组件中使用props
console.log(this.props); //默认为空对象
props的使用
class组件中的使用
子组件上直接定义属性即可
{/* 子组件上直接定义属性 */}
<Leftbar name="left"></Leftbar>
子组件中直接使用this.props获取父子传值。
render() {
console.log(this.props);
//获取props值
let { name } = this.props;
return (
<>
<div>{name}组件</div>
</>
);
}
父子组件之间props静态传值:
扫描二维码关注公众号,回复:
14834393 查看本文章
{/* 子组件上直接定义属性 建议props属性采用小驼峰格式 */}
<Leftbar name="left" dataSource="[1,2,3]"></Leftbar>
父子组件之间props动态传值:
<Leftbar dataSource={dataSource}></Leftbar>
//动态传值
//动态传递的数据如果是集合对象直接在子组件中渲染会导致报错。
备注:
父子传值静态+动态选择 (静态传值均为字符串解析)
组件中约束props
类型检测系统
prop-types
cnpm i --save-dev prop-types
//子组件中引入
import PropTypes from 'prop-types'
// 安装类型检测 propTypes
import PropTypes from "prop-types";
import "../assets/css/leftbar.css";
class Leftbar extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
//获取props值
let { name } = this.props;
return (
<>
<div className="leftbar">{name}组件</div>
</>
);
}
}
//类型检测
Leftbar.propTypes = {
name: PropTypes.string,
};
如果组件传值和类型检测不一致
写法方式另一种在class类组件内部书写(es6class类的静态字段static)
static propTypes={
name:PropTypes.string
}
组件中定义props默认值
定义默认值为了让自定义组件运行不报错。
//props定义默认值
Leftbar.defaultProps = {
name: "A",
};
props只读
this.props.name="测试"; 修改props
组件props是只读的,只能读取不能修改。
//获取props值---解构之后可修改props 但是和props没有直接关系。
let { name } = this.props;
name = "小花";
父子传值逆向传值
子到父传值
子组件中定义父子props传值属性
//类型检测
Leftbar.propTypes = {
dataSource: PropTypes.array,
onBindIndex: PropTypes.func,
};
//定义props默认值
Leftbar.defaultProps = {
dataSource: [],
onBindIndex: () => {},
};
//onBindIndex 该属性为函数值
//父向子传值传函数
//子接收父的函数执行可以逆向传值。