25、React 组件开发与测试全解析

最新推荐文章于 2025-09-03 12:39:28 发布

y4z5a6b7

最新推荐文章于 2025-09-03 12:39:28 发布

阅读量39

点赞数

CC 4.0 BY-SA版权

分类专栏： React与TypeScript实战文章标签： React 组件开发可复用组件

本文链接：https://blog.youkuaiyun.com/y4z5a6b7/article/details/151132394

React与TypeScript实战专栏收录该内容

27 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

React 组件开发与测试全解析

1. 可复用组件开发

1.1 控制 `toggleValue`

在 useToggle 中控制 toggleValue 的示例如下：

const [toggleValue, setToggleValue] = useState(false);
const onCount = useRef(0);
const { resolvedToggleValue, toggle } = useToggle({
  toggleValue,
  onToggleValueChange: (value) => {
    if (onCount.current >= 3) {
      setToggleValue(false);
    } else {
      setToggleValue(value);
      if (value) {
        onCount.current++;
      }
    }
  },
});

此示例将 toggle 值存储在自身状态中，并将其传递给 useToggle 。 onToggleValueChange 通过更新状态值来处理，状态值仅允许被设置为 true 三次。