如何在不使用事件的情况下获取组件的属性

Question

考虑一下我有一个父组件 Like

const [ top , setTop ] = useState(0);
const Parent = () => {
    return (
        <div style={{ display:"flex" , flexDirection:"column" }} 
            onScroll={ (e) => { setTop(e.target.scrollTop) } }>
            <Child parentTop={top} no={1} />
            <Child parentTop={top} no={2} />
            <Child parentTop={top} no={3} />
            <Child parentTop={top} no={4} />
            <Child parentTop={top} no={5} />
        </div>
    );
}

此处子元素为每次滚动重新渲染和 5 个相同的子组件就像：

const Child = ({ parentTop , no }) => {
    return (
        <div>
            {"THIS IS CHILD COMPONENT"}
        </div>
    );
}

我想 console.log( no + " : reached top ") 当 parentTop 小于或等于 child 的 offsetTop。偏移

Answer 1

看到这里没有人帮助我很难过:(

但经过多次尝试，我找到了答案:) 为此，我们必须使用 useRef() 挂钩。

喜欢...

const Child = ({ parentTop , no }) => {
    const refDiv = useRef();
    useEffect(() => {
        if(parentTop <= refDiv.current.offsetTop){
            console.log( no + " : reached Top" );
        } 
    },[parentTop]);
    return (
        <div ref={refDiv} >
            {"THIS IS CHILD COMPONENT"}
        </div>
    );
}

如何在不使用事件的情况下获取组件的属性

How to get properties of a component without using event

dom

state

rerender

reactjs

react-component