您好，我有以下方案来渲染菜单和下拉菜单：
const MenuBar = props => {
const MenuTags = [
{
name: 'home',
redirectTo: '/',
dropdown: {
items: ['one', 'two', 'three'],
},
},
{
name: 'about',
redirectTo: '../about',
dropdown: {
items: ['one', 'two', 'three'],
},
},
{ name: 'not dropdown', redirectTo: '../dashboard' },
{ name: 'not dropdown', redirectTo: '../dashboard/about' },
];
const [visibleMenu, setVisibleMenu] = useState(
MenuTags.reduce((r, e) => ((r[e.name] = false), r), {}),
),
onUpdateVisibility = item => {
const visibleMenuCopy = { ...visibleMenu };
Object.keys(visibleMenuCopy).forEach(
key => (visibleMenuCopy[key] = key == item),
);
setVisibleMenu(visibleMenuCopy);
};
console.log(visibleMenu);
return (
<NavUl isOpen={props.isOpen}>
{MenuTags.map(item => (
<MenuItem
options={item}
visibleMenu={visibleMenu}
onClick={() => onUpdateVisibility(item)}
/>
))}
<li>
<FontAwesomeIcon
onClick={() => props.setOpenBox(!props.isOpen)}
className="searchIcon"
rotation={90}
icon={faSearch}
size="1x"
fixedWidth
color="rgba(0, 0, 0, 0.08);"
/>
</li>
</NavUl>
);
};
基本上在这里我有一个数组，其中有要在li中呈现的名称以及redirectLink（用于react router链接）
const MenuItem = props => {
const { name, redirectTo, dropdown } = props.options;
return (
<NavLi>
<Link to={redirectTo}>{name}</Link>
{dropdown && dropdown !== null ? <DropDown {...props} /> : ''}
</NavLi>
);
};
在这里，我基本上将菜单项呈现为已读，如果dropdown变量为true，则将呈现以下组件：
const DropDown = props => {
const { items } = props;
console.log(props.visibleMenu);
return(
<>
{ items && items !== null && props.visibleMenu ?
}
</>
)
};
因此，在这里，我将检查jsx中的一些条件，并在我的items数组中使用.map来呈现以下组件：
<ul>
<li>
<a>
</li>
</ul>
对于数组中的每个项目嗯，我不知道我的代码是好还是奇怪如果有人可以帮助我以及如何改进代码
您的代码是一次很棒的尝试，但是您正在做一些奇怪的事情。而不是使用类来处理所有事情，而是利用每次使用状态时的react渲染方式。您不需要那么多的课程。这件作品例如：
const [visibleMenu, setVisibleMenu] = useState(
MenuTags.reduce((r, e) => ((r[e.name] = false), r), {}),
),
onUpdateVisibility = item => {
const visibleMenuCopy = { ...visibleMenu };
Object.keys(visibleMenuCopy).forEach(
key => (visibleMenuCopy[key] = key == item),
);
setVisibleMenu(visibleMenuCopy);
};
阅读非常混乱，如果我的一位开发人员向我发出了拉取请求，我将拒绝它。就像我说的那样，利用渲染反应就可以了。另一件事是利用具有独立功能的MenuBar不需要知道dropdownItems是可见还是不可见。链接也可以重命名:)
// No need for a class here an array will work great!
const menuTags = [
{ name: 'home', link: '/', dropdownItems: ['one', 'two', 'three'] },
// ... other menu tags you had.
]
const MenuBar = props => {
return (
<NavUl isOpen={props.isOpen}>
{menuTags.map(menuTag => <MenuTag tag={menuTag} />)
<li>
<FontAwesomeIcon
// Move the logic to only be in the Parent, this component shouldn't have to
// pass it's parents variables.
onClick={props.toggleOpen}
// ... the rest of what you had
/>
</li>
</NavUl >
)
}
现在，清理过的那部分逻辑可以移到MenuItem本身。另外，您实际上并不需要可以在MenuItem中处理的DropDown文件。我注意到您也这样做if (dropdown && dropdown !== null)是一样的if (dropdown)。如果变量为null，则在javascript中为false。另一件事是，如果您想在react if语句上呈现某些内容，则? <Dropdown /> : ''可以这样做&& <Dropdown />
const MenuItem = ({ tag }) => {
const { name, link, dropdownItems } = tag;
// Dropdown visibility can be handled here.
const [visibility, setVisibility] = useState(false)
return (
<NavLi onClick={() => setVisibility(!visibility)} >
<Link to={link}>{name}</Link>
// If these are true dropdown items will appear.
{visibility && dropdownItem && (
{dropdownItems.map(item => (
<ul>
<li>
<a>{item}</a>
</li>
</ul>
))}
)}
</NavLi>
);
};
那应该是你所追求的。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句