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

【问题标题】：How to get properties of a component without using event如何在不使用事件的情况下获取组件的属性
【发布时间】：2021-03-15 05:03:29
【问题描述】：

假设我有一个父组件 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 + " :达到 top ") 当 parentTop 小于或等于 child 的 offsetTop 时。偏移量

【问题讨论】：

标签： reactjs dom state react-component rerender

【解决方案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>
    );
}

【讨论】：