react吸顶组件，样式的添加方案，classList，add，remove

一般我们直接导入的react，也可以从react中结构出自己用的属性或方法进行使用：

import React from "react";
class CityList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cityList: {},
      cityIndex: [],
      activeIndex: 0,
    };
    // 创建ref对象
    this.cityListComponent = React.createRef();
  }
  
  /**
   * 获取每行高度
   * @param { Number} index
   * @returns {Number} 当前行的高度
   */
  getRowHeight = ({ index }) => {
    let height =
      TITLE_HEIGHT +
      this.state.cityList[this.state.cityIndex[index]].length * NAME_HEIGHT;
    return height;
  };
  
}

吸顶组件

dom都有getBoundingClientRect()这个方法，打印出来之后可以看到

为dom添加类名，或者移除类名：

contentEl.classList.add(styles.fixed)

contentEl.classList.remove(styles.fixed)

import React, { Component, createRef } from 'react'
import PropTypes from 'prop-types'
import styles from './index.module.css'

// dom.getBoundingClientRect() 获取元素的大小及其相对于视口的位置。

/* 
  条件筛选栏吸顶功能实现步骤：

  1 封装 Sticky 组件，实现吸顶功能。
  2 在 HouseList 页面中，导入 Sticky 组件。
  3 使用 Sticky 组件包裹要实现吸顶功能的 Filter 组件。

  4 在 Sticky 组件中，创建两个 ref 对象（placeholder、content），分别指向占位元素和内容元素。
  5 组件中，监听浏览器的 scroll 事件（注意销毁事件）。
  6 在 scroll 事件中，通过 getBoundingClientRect() 方法得到筛选栏占位元素当前位置（top）。
  7 判断 top 是否小于 0（是否在可视区内）。
  8 如果小于，就添加需要吸顶样式（fixed），同时设置占位元素高度（与条件筛选栏高度相同）。
  9 否则，就移除吸顶样式，同时让占位元素高度为 0。
*/

class Sticky extends Component {
  // 创建ref对象
  placeholder = createRef()
  content = createRef()
  // scroll 事件的事件处理程序
  handleScroll = () => {
    console.log("this",this)
    // 获取DOM对象
    const placeholderEl = this.placeholder.current
    const contentEl = this.content.current

    const { top } = placeholderEl.getBoundingClientRect()
    if (top < 0) {
      // 吸顶
      contentEl.classList.add(styles.fixed)
      placeholderEl.style.height = `${height}px`
    } else {
      // 取消吸顶
      contentEl.classList.remove(styles.fixed)
      placeholderEl.style.height = '0px'
    }
  }

  // 监听 scroll 事件
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll)
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll)
  }

  render() {
    return (
      <div>
        {/* 占位元素 */}
        <div ref={this.placeholder} />
        {/* 内容元素 */}
        <div ref={this.content}>{this.props.children}</div>
      </div>
    )
  }
}
Sticky.propTypes = {
  height: PropTypes.number.isRequired
}
export default Sticky

// css样式
.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

在类上挂载属性或方法

挂载属性 直接在类里写就行 就可以使用this来访问。在方法中挂载，需要使用==this.==的方式挂载

class Sticky extends Component {
  // 创建ref对象
  placeholder = createRef()
  content = createRef()
  }

// 直接就可以通过this.的方式访问到了

// 在外面定义了，在方法中进行了赋值
class News extends React.Component {
  state = {
    list: [],
    count: 0,
  };
  filters = {};
  componentDidMount() {
    this.searchHouseList();
  }
  /**
   * 接受Fillter组件中中的筛选数据
   * @param { Object}
   */
  onFilter = (filters) => {
    this.filters = filters;
    this.searchHouseList();
  };
}