react组件化开发

项目实战中以组件化为主进行开发。

创建两个子组件（A，B）

javascript">javascript">import React, { Component } from "react";
class Leftbar extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <>
        <div>左侧组件</div>
      </>
    );
  }
}

export default Leftbar;
//假设这个是组件A，B

引入组件

javascript">javascript">//引入组件
import Leftbar from './components/Leftbar'
import Rightbar from './components/Rightbar';

挂载

javascript">javascript">     <>
        <Leftbar></Leftbar>
        <div>根组件</div>
        <Rightbar></Rightbar>
      </>
    //挂载的用法和html标签一致

注意：

javascript">javascript">组件引入
import leftbar from './components/Leftbar'  命名小写

组件的props

javascript">javascript">类组件存在自身维护的状态state，但是如果涉及组件化开发使用props属性进行传值。
props存在是为了解决组件间传值。

类组件中props的关系。

Component父类中存在：

extends继承之后class类组件中可以使用this.props访问props传值。

组件中使用props

javascript">javascript"> console.log(this.props); //默认为空对象

props的使用

class组件中的使用

javascript">javascript">子组件上直接定义属性即可
{/* 子组件上直接定义属性 */}
<Leftbar name="left"></Leftbar>

子组件中直接使用this.props获取父子传值。

javascript">javascript">render() {
    console.log(this.props);
    //获取props值
    let { name } = this.props;
    return (
      <>
        <div>{name}组件</div>
      </>
    );
  }

父子组件之间props静态传值：

javascript">javascript">{/* 子组件上直接定义属性  建议props属性采用小驼峰格式 */}
<Leftbar name="left" dataSource="[1,2,3]"></Leftbar>

父子组件之间props动态传值：

javascript">javascript">  <Leftbar dataSource={dataSource}></Leftbar>
  //动态传值
  //动态传递的数据如果是集合对象直接在子组件中渲染会导致报错。

备注：

javascript">javascript">父子传值静态+动态选择  （静态传值均为字符串解析）

组件中约束props

类型检测系统

javascript">javascript">prop-types
cnpm i --save-dev prop-types

//子组件中引入
import PropTypes from 'prop-types'

javascript">javascript">// 安装类型检测  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）

javascript">javascript">  static propTypes={
    name:PropTypes.string
  }

组件中定义props默认值

javascript">javascript">定义默认值为了让自定义组件运行不报错。
//props定义默认值
Leftbar.defaultProps = {
  name: "A",
};

props只读

javascript">javascript"> this.props.name="测试";  修改props

javascript">javascript">组件props是只读的，只能读取不能修改。
 //获取props值---解构之后可修改props 但是和props没有直接关系。
let { name } = this.props;
name = "小花";

父子传值逆向传值

子到父传值

javascript">javascript">子组件中定义父子props传值属性
//类型检测
Leftbar.propTypes = {
  dataSource: PropTypes.array,
  onBindIndex: PropTypes.func,
};
//定义props默认值
Leftbar.defaultProps = {
  dataSource: [],
  onBindIndex: () => {},
};
//onBindIndex 该属性为函数值
//父向子传值传函数
//子接收父的函数执行可以逆向传值。