React 条件渲染 + 函数组件 + 输入控件的一个小坑

来源：4-8 -JSX中使用条件判断-让JSX具备if-else能力

Neolu4ever

2023-04-11

老师您好，在使用条件渲染时，我发现如果条件渲染被封装到一个函数组件中，并且返回的组件中有输入控件时，比如 antd 的 input 组件，输入内容导致的组件更新会让当前的控件失去焦点。也就是说每打一个字，都要重新选中组件来进行下一次输入。

我查到的资料显示说，这是因为每次组件更新做条件判断时，都会执行函数组件返回一个全新的组件，所以之前的聚焦就被刷掉了。

解决的办法是不用函数组件封装，但是在判断条件变多时，会导致重复代码量激增。而且根据不同的条件渲染不同的输入控件也是一个常见的场景。想请教老师有没有其他解决方案。

写回答

1回答

双越

2023-04-16

已采纳

试着用 useMemo 或者 React.memo 这种缓存思路来想一下

PS：最近一周外出，没法带电脑，问题没有及时解答，非常抱歉。后面我会继续及时解答课程问题的。

React18+ Nest.js 全栈开发仿问卷星项目

React18+TS4+Antd5+Next.js13 ，B端+C 端，完整业务

383 学习 · 252 问题

相似问题

回答 1

回答 1

回答 1

回答 1

回答 3