AnimatePresence引起'UncaughtTypeError:Cannotreadpropertiesofnull(reading'useRef')'错误 _编程开发

AnimatePresence引起'UncaughtTypeError:Cannotreadpropertiesofnull(reading'useRef')'错误

创始人

2024-11-02 09:31:39

0次

该错误通常是由于尝试在不存在的元素上应用动画而引起的，我们可以通过检查动画应用的对象来解决这个问题。以下是一个可能会导致该错误的示例代码：

import {motion, AnimatePresence} from 'framer-motion';

function ExampleComponent({show}) {
  return (
    
      {show && (
        
          Hello World
        
      )}
    
  );
}

在上面的代码中，如果show为false，动画会在元素从DOM中移除之前进行处理，这将导致AnimatePresence无法找到应该动画处理的元素，从而出现上述错误。为了解决这个问题，我们可以将动画处理移动到show的条件语句中，只有在元素存在时才应用动画：

import {motion, AnimatePresence} from 'framer-motion';

function ExampleComponent({show}) {
  return (
    
      {show && (
        
          Hello World
        
      )}
    
  );
}

使用key属性可以确保元素正确地进行添加和删除，从而避免上述错误。

上一篇：AnimatePresence和出场动画不会触发。

下一篇：AnimatePresence与clipPathinset无法工作

AnimatePresence引起'UncaughtTypeError:Cannotreadpropertiesofnull(reading'useRef')'错误

相关内容

热门资讯