相关疑难解决方法(0)

是否可以检测元素引用何时改变其高度？我尝试使用以下内容，但是当元素的高度由于某种原因发生变化时，不会检测到该变化。（请考虑这也必须在 IE11 中工作）

useEffect(() => {
  // detect change in reference height
}, [elementRef])

我试图深入了解useEffect钩子。

我想知道何时使用哪种方法以及为什么？

1.useEffect with no second paraments
 useEffect(()=>{})

2.useEffect with second paraments as []
  useEffect(()=>{},[])

3.useEffect with some arguments passed in the second parameter
 useEffect(()=>{},[arg])

我有一个组件，它使用钩子将输入值设置为组件状态。当输入值的长度超过 0 个字符时，我想添加一个类，但是我遇到了一个问题，TypeScript 说我的 ref 可能未定义。

即使我检查 ref 是否存在于包装代码以添加类的条件中，我也无法摆脱这个错误。我不确定这个问题的解决方案。

错误： Object is possibly 'undefined'开 inputValue.current.classList.add(inputHasContentClassName);

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

const Component: React.FC = () => {
  const [inputValue, setInputValue] = useState('');
  const myRef = useRef();

  useEffect(() => {
    const inputHasContentClassName = 'input--has-value';

    if (inputValue.length > 0 && inputValue) {
      inputValue.current.classList.add(inputHasContentClassName);
    } else {
      inputValue.current.classList.remove(inputHasContentClassName);
    }
  }, [inputValue]);

  function handleInputChange(e: React.FormEvent<HTMLInputElement>) {
    setInputValue(e.currentTarget.value);
  }

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    console.log('Submit form');
  }

  return (
    <> …

我尝试测试使用ResizeObserver. 另外，我需要检查元素是否溢出或调整大小后没有溢出。于是我写了这样一个决定：

import { useLayoutEffect, useState } from 'react';
import ResizeObserver from 'resize-observer-polyfill';

export default function useOverflowCheck(ref) {
  const [isOverflowing, setIsOverflowing] = useState(false);

  const isOverflow = current => {
    if (current) {
      const hasOverflowX = current.offsetWidth < current.scrollWidth;
      const hasOverflowY = current.offsetHeight < current.scrollHeight;

      setIsOverflowing(hasOverflowX || hasOverflowY);
    }
  };

  // eslint-disable-next-line react-hooks/exhaustive-deps
  useLayoutEffect(() => {
    const element = ref.current;

    const resizeObserver = new ResizeObserver(entries => {
      entries && entries.length && isOverflow(entries[0].target);
    });

    if (element) {
      resizeObserver.observe(element);
      return () …