Question

我在从 useEffect 获取 clientWidth 时遇到问题。

有一个 lazyLoad 用于加载用户页面。

import {Suspense, lazy} from 'react';

const UsersContainer = lazy (() => import ('./ users / users-container'));

const Index = (props) => {
    return (
        <Suspense fallback = {<div id = {'loading'} />}>
            <UsersContainer />
        </Suspense>
    )
}

export default Index;

UsersContainer 有一个子组件 dataTooltip，如果它不适合块，它会显示完整的用户名。

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

import '../common.scss';

const DataTooltip = ({title, ... props}) => {
    let ref = useRef ();

    useEffect (() => {
        if (ref.current.scrollWidth> ref.current.clientWidth) {
            ref.current.setAttribute ('data-tooltip', title)
        }
    });

    return (
        <div ref = {ref} className = {'tooltip'}>
            {
                React.cloneElement (props.children, {ref: ref})
            }
        </div>
    )
}

export default DataTooltip;

有什么问题吗？

UsersContainer 在 DOM 中加载并呈现后，它具有 'display: none' 并且同时 DataTooltip 中的 useEffect 是异步触发的。

因此，DataTooltip 表示 clientWidth = 0，因为父级具有 'display: none'。< /p>

如何在 lazyLoad 移除 'display: none' 后使 useEffect 工作。

PS：useLayoutEffect 工作原理相同，clientWidth = 0

问题是这样解决的：

<Suspense fallback={<div id={'loading'}/>}>
   <Main/>
   <Acquaintance/>
   <UsersContainer/>
   <RegisterContainer/>
</Suspense>

到

<Suspense fallback={<div id={'loading'}/>}>
    <Main/>
</Suspense> 
            
<Suspense fallback={<div id={'loading'}/>}>
    <Acquaintance/> 
</Suspense>
            
<Suspense fallback={<div id={'loading'}/>}>
    <UsersContainer/>
</Suspense>
            
<Suspense fallback={<div id={'loading'}/>}>
    <RegisterContainer/>
</Suspense>

Answer 1

我不知道这是否能解决您的问题 - 但我立即注意到的一件事是您缺少 useEffect 挂钩中的依赖项数组。

var value = $(this).closest('tr').find('input:checkbox')[0].val()

应该是：

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

const DataTooltip = ({title, ... props}) => {
    let ref = useRef ();

    useEffect (() => {
        if (ref.current.scrollWidth> ref.current.clientWidth) {
            ref.current.setAttribute ('data-tooltip', title)
        }
    });

    return (...)
}

export default DataTooltip;

还要记住，这将导致组件在 import React, {useEffect, useRef} from 'react'; ... const DataTooltip = ({title, ... props}) => { let ref = useRef (); useEffect (() => { if (ref.current.scrollWidth> ref.current.clientWidth) { ref.current.setAttribute ('data-tooltip', title) } }, [ref]); return (...) } export default DataTooltip; 更改时重新渲染，根据 ref 钩子的文档，您应该始终声明 useEffect 中使用的上层作用域中的任何变量hook 作为依赖数组的一部分，如果您不使用任何此类变量，则仍应传递一个空数组以防止运行无限循环。

反应延迟加载 useEffect

1 个答案: