react 点击展开 收起功能

点击展开收起功能

1.使用useToggle进行定义
useToggle用法：用于在两个状态值间切换的 Hook。
const [states, { set }] = useToggle(true)

// 判断是否下拉或收起
  const [states, { set }] = useToggle(true)

2.方法

// 展开显示全部标签
  const handlerAll = (val: boolean) => {
    set(!val)
  }

3.render渲染

<div>
   <span className="footer_open" onClick={() => handlerAll(states)}>
     {/* {state.text} */}
     {states ? '展开全部' : '收起'}
   </span>
   {states ? (
     <ArrowDown className="arrow" />
   ) : (
     <ArrowUp className="arrow" />
   )}
 </div>