任何能够解释目标属性如何在此功能组件中使用的人

Question

基本上，我使用useEffect(react Hooks(来启用在div外部单击时关闭菜单。

我在网上找到了一个方法，但就是无法理解target是如何被用作clickHandler的属性的。

我知道event.target在通过触发的事件访问元素时是如何工作的，但在这种情况下，我很难理解为什么。

很抱歉问了这个问题，非常感谢您的帮助。

import React, { useState, useEffect } from 'react';
import './Nav.css';
import { NavLink } from 'react-router-dom';
function Nav({id}) {
const [hidden, sethidden] = useState(true);
useEffect(() => {
const clickHandler = ({target}) => {
const container = document.getElementById(`container-${id}`);
if (container.contains(target))
return; sethidden(true);
};
document.addEventListener('click', clickHandler);
return () => document.removeEventListener('click', clickHandler)
});
return (
<div id={`container-${id}`}>
{hidden ? null : 
<nav >
<ul className='nav-links'>
<NavLink to='/howItWorks' 
activeStyle={{
color: ' coral'
}}>
<li>How it works</li>
</NavLink>
<NavLink to='/drumMachine' 
activeStyle={{
color: '#6c8993'
}}>
<li>Live Drum Machine</li>
</NavLink>
<NavLink to='/howIMadeIt' 
activeStyle={{
color: '#39a3c6',
height: '',

}}>
<li>How I made it</li>
</NavLink>
</ul>
</nav>}
<button onClick={() => sethidden(!hidden)}>{hidden ? 'Get started!' : 'Close'}</button>

</div>  )
}
export default Nav;

Answer 1

如果我理解你的问题，你想知道为什么｛target｝存在于clickHandler的参数中

它使用了一个称为析构函数的方法，直接在方法参数中从对象e中析构函数属性target。

const clickHandler = ({target}) => {
const container = document.getElementById(`container-${id}`);
if (container.contains(target))
return; sethidden(true);
};

与相同

const clickHandler = (e) => {
const {target} = e;
const container = document.getElementById(`container-${id}`);
if (container.contains(target))
return; sethidden(true);
};

与相同

const clickHandler = (e) => {
const target = e.target;
const container = document.getElementById(`container-${id}`);
if (container.contains(target))
return; sethidden(true);
};