前端手写展开收起

需求是：某块自定义的区域内容固定一行展示，超出部分使用”“展开” 、“收起”来显示更多数据
我这边使用的技术栈是react、hooks 以及antd

废话不多说，直接上代码：

import { Radio } from 'antd';
import { useEffect, useState, useRef } from 'react';
import './index.less';
const pageList = [
  '1-15页',
  '16-30页',
  '31-45页',
  '46-60页',
  '61-75页',
  '76-90页',
  '91-105页',
  '106-115页',
];

const BookRadio = (props) => {
  // const { value } = props;
  const bookListRef = useRef<any>(null);
  const [value, setValue] = useState(undefined);
  const [showMore, setShowMore] = useState(false);
  const [showExpand, setShowExpand] = useState(false);
  const onChange = (e) => {
    setValue(e.target.value);
  };

  useEffect(() => {
    setTimeout(() => {
      if (bookListRef) {
        let { scrollHeight, offsetHeight } = bookListRef.current;
        if (scrollHeight > offsetHeight) {
          setShowExpand(true);
        }
      }
    }, 100);
  }, []);

  const clickExpand = () => {
    setShowMore(!showMore);
  };

  return (
    <div className='book-radio-box'>
      <Radio.Group
        onChange={onChange}
        value={value}
        ref={bookListRef}
        className={!showMore ? 'radio-group-height' : ''}
      >
        {pageList.map((page, index) => (
          <div className='book-radio-item' key={page}>
            <Radio value={index}>{page}</Radio>
          </div>
        ))}
      </Radio.Group>
      {showExpand && (
        <div className='expand-box' onClick={clickExpand}>
          {!showMore && (
            <span>
              展开 <i className='iconfont C_tree-switcher'></i>
            </span>
          )}
          {showMore && (
            <span>
              收起 <i className='iconfont C_tree-switcherup'></i>
            </span>
          )}
        </div>
      )}
    </div>
  );
};

export default BookRadio;

样式文件：

.book-item-box {
  width: 100%;
  display: flex;
  padding-top: 0;

  .ant-checkbox-group {
    display: flex;
    flex-wrap: wrap;
  }

  .book-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 16px 16px 0 0;

    .book-check-box {
      margin-top: 8px;
      .checkbox-name {
        background-color: #e6f7f0;
        border-radius: 4px;
        padding: 0 8px;
      }
    }

    &:nth-child(7n) {
      margin-right: 0;
    }

    .ant-image {
      width: 98px;
      height: 140px;
      object-fit: contain;
      border: 1px solid #e8e8e8;
    }
  }
}

如果对你有帮助的话点个赞哟~~~~~