带有动态响应组件处理程序绑定的Javascript循环
带有动态响应组件处理程序绑定的Javascript循环
提问于 2021-03-11 06:44:34
我对Javascript/ReactJ世界很陌生。我在做侧导航。下面是我代码的一部分-
import React, {Component} from "react";
import Link from "./Link/Link";
class Sidebar extends Component {
state = {
dashboard: {
name: "Dashboard",
href: "#",
active: true,
svgPath: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6",
children: []
},
team: {
name: "Team",
href: "#",
active: false,
svgPath: "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z",
children: [
{
name: "Overflow",
href: "#",
},
{
name: "Members",
href: "#",
},
{
name: "Calender",
href: "#",
},
{
name: "Settings",
href: "#",
}
]
}
}
navClickHandler = (e, key) => {
console.log(e, key)
}
render() {
let navLinks = [];
for (const item in this.state) {
navLinks.push(<Link key={item} navClicked={(e, item) => this.navClickHandler(e, item)} config={this.state[item]} />)
}
return (
<div className="hidden bg-indigo-700 md:flex md:flex-shrink-0">
<div className="flex flex-col w-64 border-r border-gray-200 pt-5 pb-4 bg-white overflow-y-auto">
<div className="flex items-center flex-shrink-0 px-4">
<img className="h-8 w-auto"
src="https://tailwindui.com/img/logos/workflow-logo-indigo-600-mark-gray-800-text.svg"
alt="Workflow" />
</div>
<div className="mt-5 flex-grow flex flex-col">
<nav className="flex-1 px-2 space-y-1 bg-white" aria-label="Sidebar">
{navLinks}
</nav>
</div>
</div>
</div>
);
}
}
export default Sidebar;如何在navClickedHandler函数中获得项值-
let navLinks = [];
for (const item in this.state) {
navLinks.push(<Link key={item} navClicked={(e, item) => this.navClickHandler(e, item)} config={this.state[item]} />)
}实际上，我想用那个键(项目)来检查哪个侧导航是活动的。它将根据单击更改状态对象。
console.log in nacClickHandler给了undefined。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-03-11 06:53:45
您没有将item传递给Link，因此不能将其作为参数从click事件返回。
因此，改变这一点：
navClicked={(e, item) => this.navClickHandler(e, item)} 对此：
navClicked={e => this.navClickHandler(e, item)} 或者，您可以将您的<Link/>组件更改为如下所示：
const Link = ({navClicked, item}) => (
<div onClick={e => navClicked(e, item)}></div>
);并将item作为一个支柱：
<Link key={item} item={item} navClicked={this.navClickHandler} config={this.state[item]} />第二个选项更可取，因为它允许您始终传递相同的函数引用，从而避免了冗余呈现(前提是Link是一个PureComponent，或者包装在memo中的功能组件)。
Stack Overflow用户
发布于 2021-03-11 06:55:52
你好，我看到的其他问题是，key={item}将被转换为key=[object Object]，因此您的行为会因为检查key1 !== key2而失败，因为实际值将是[object Object] !=== [object Object]，它失败了。
我建议另一种方法是使用一些唯一的数据item.id，或者使用uuid这样的基本包生成一些数据。
回到您的问题，为了检查哪个项目是活动的，我建议您这样做：<Link key={item.id} .... active={state.selected.id === item.id}/>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66577630
复制相关文章
相似问题
腾讯云开发者
