我正在從陣列創建一個動態選單，但我只想要最后一項上的 onClick 方法。這是在 ReactJS 組件中。在 dropDownMenu.map 中，如何將錨標記設定為僅具有陣列中定義的 onClick？
const dropDownMenu = [
{ name: 'Profile', href: '#' },
{ name: 'Settings', href: '#' },
{ name: 'Sign out', href: '#', onClick=logOut }
];
const logout = () => {
signOut();
};
{dropDownMenu.map((item) => (
<Menu.Item key={item.name}>
{({ active }) => (
<a href={item.href}>
{item.name}
</a>
)}
</Menu.Item>
))}
uj5u.com熱心網友回復：
您不需要在 onClick 中檢查任何內容，這是一個額外的無用代碼，如果 clickHandler 未定義，則會隱式地處理此問題。此鏈接可能對您有所幫助。
const logout = () => {
signOut();
};
const dropDownMenu = [
{ name: "Profile", href: "#" },
{ name: "Settings", href: "#" },
{ name: "Sign out", href: "#", clickHandler: logOut },
];
{
dropDownMenu.map((item) => (
<Menu.Item key={item.name}>
{({ active }) => <a onClick={item.clickHandler} href={item.href}>{item.name}</a>}
</Menu.Item>
));
}
uj5u.com熱心網友回復：
Array.prototype.map 在它的回呼函式中有第二個引數，你可以檢查它是否是陣列中的最后一個值，如果是，你可以傳遞回呼
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
const dropDownMenu = [
{ name: 'Profile', href: '#' },
{ name: 'Settings', href: '#' },
{ name: 'Sign out', href: '#' }
];
const logout = () => {
signOut();
};
{
dropDownMenu.map((item, index) => (
<Menu.Item key={item.name}>
{({ active }) => (
<a href={item.href} onClick={dropDownMenu.length - 1 === index ? logout : null}>
{item.name}
</a>
)}
</Menu.Item>
))
}
uj5u.com熱心網友回復：
onClick 和 href 屬性在錨標簽中可用，您可以使用解構直接傳遞。
const dropDownMenu = [
{ name: 'Profile', href: '#' },
{ name: 'Settings', href: '#' },
{ name: 'Sign out', href: '#', onClick:logOut }
];
const logout = () => {
signOut();
};
{dropDownMenu.map(({name, ...rest}) => (
<Menu.Item key={name}>{({ active }) => (<a {...rest}>{name}</a>)}</Menu.Item>
))}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/395640.html
標籤：javascript 反应