在React Functional Component中使用useRef时，获取null错误的Cannot read属性'style‘

在React Functional Component中使用useRef时，获取null错误的Cannot read属性'style'是因为在组件渲染过程中，useRef返回的ref对象默认为null，而在组件渲染完成后，ref对象会被赋值为对应的DOM元素。

要解决这个错误，可以通过以下几种方式：

确保在访问ref对象的属性之前，组件已经渲染完成。可以使用useEffect钩子函数来监听组件的渲染状态，并在渲染完成后进行操作。例如：

import React, { useEffect, useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    if (myRef.current) {
      // 在组件渲染完成后，myRef.current会被赋值为对应的DOM元素
      console.log(myRef.current.style);
    }
  }, []);

  return <div ref={myRef}>Hello World</div>;
}

使用可选链操作符（Optional Chaining Operator）来避免访问null引发的错误。可选链操作符可以在访问属性时判断该属性是否存在，如果不存在则返回undefined而不是抛出错误。例如：

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  return <div ref={myRef}>Hello World</div>;
}

// 在其他地方访问ref对象的属性时，使用可选链操作符来避免错误
console.log(myRef?.current?.style);

在使用ref对象之前，可以通过条件判断来确保ref对象已经被赋值。例如：

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  return <div ref={myRef}>Hello World</div>;
}

// 在其他地方访问ref对象的属性之前，通过条件判断确保ref对象已经被赋值
if (myRef.current) {
  console.log(myRef.current.style);
}

以上是解决在React Functional Component中使用useRef时获取null错误的方法。关于React的更多内容，你可以参考腾讯云的React产品介绍页面：React产品介绍。