具有动态反应组件处理程序绑定的 Javascript 循环答案

【问题标题】：Javascript loop with dynamic react component handler binding具有动态反应组件处理程序绑定的 Javascript 循环
【发布时间】：2021-03-11 06:44:34
【问题描述】：

我是 Javascript/ReactJs 世界的新手。我正在建立一个侧面导航。以下是我的部分代码 -

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]} />)
}

实际上，我想使用该键（项目）来检查哪个侧导航处于活动状态。它会根据点击改变状态对象。

nacClickHandler 中的console.log 正在给undefined。

【问题讨论】：

在navClicked 处理程序中似乎不需要item。 navLinks.push(<Link key={item} navClicked={(e) => this.navClickHandler(e, item)} config={this.state[item]} />)。这样你就可以在循环中使用item

标签： javascript reactjs for-loop

【解决方案1】：

您没有将item 传递给Link，因此您无法从点击事件中将其作为参数返回。

所以改变这个：

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 中的功能组件）

【讨论】：

【解决方案2】：

您好，我看到的其他问题是key={item} 将被转换为key=[object Object]，因此您的行为将由于检查key1 !== key2 而失败，因为实际值将是[object Object] !=== [object Object]，但失败了。

我建议使用一些独特的数据item.id 或使用uuid 等基本包生成一些替代方法

回到您的问题，为了检查哪个项目处于活动状态，我建议您这样做： <Link key={item.id} .... active={state.selected.id === item.id}/>

【讨论】：