React 事件处理程序接收没有子元素的目标元素

Question

我使用反应组件创建了两个按钮。 其中一个是蓝色的，通过将鼠标悬停在它上面，预计会在该按钮上绘制一个绿色层。 另一个是绿色的，预计在悬停时会变成蓝色。

export function SecondaryButton(props) {

    const handleHover = useHandleHover();

    const { className, ...restProps } = props;

    return (
        <button
            type="butto n"
            className={`btn btn-secondary ${className ? className : ''}`}
            onMouseEnter={handleHover}
            onMouseLeave={handleHover}
            {...restProps}
        >
            <div className='btn-content'>{props.children}</div>
            <div className='btn-secondary-tran'></div>
        </button>
    )
}


export function PrimaryButton(props) {

    const handleHover = useHandleHover();

    const { className, ...restProps } = props;

    return (
        <button
            type="button"
            className={`btn btn-primary ${className ? className : ''}`}
            onMouseEnter={handleHover}
            onMouseLeave={handleHover}
            {...restProps}
        >
            <div className='btn-content'>{props.children}</div>
            <div className='btn-primary-tran'></div>
        </button>
    )
}

function useHandleHover() {
        const handleTransition = (e) => {
            console.log(e.target)
            if (e.type === 'mouseenter') {
                e.target.lastElementChild.style.height = 100 + '%';
                e.target.firstElementChild.style.color = 'white';
                e.target.lastElementChild.style.color = '#476FFF';
            } else {
                e.target.lastElementChild.style.height = ''
                e.target.firstElementChild.style.color = '';
                e.target.lastElementChild.style.color = '';
            }
        }
        return handleTransition;
}

这里的问题是，当我在其中任何一个上使用 hover 时，它有时会按预期工作，有时会引发错误。 该错误源于useHandleHover function 其中e.target.lastElementChild是 null。 当我使用console.log(e.target)时发现e.target有时是onMouseEnter和onMouseLeave事件侦听器附加到但没有其子级的按钮。 所以e.target.lastElementChild变为 null。

为了更好地了解问题，这是实现按钮的代码框演示

我想知道为什么会不定期发生这种情况？？

为什么e.target有时有它的孩子，有时却想念他们？