如何将列表“键”值作为嵌套组件中的道具传递？答案

【问题标题】：How to pass the list "key" value as a props in nested component?如何将列表“键”值作为嵌套组件中的道具传递？
【发布时间】：2020-12-27 00:48:22
【问题描述】：

（我提前为丑陋的代码道歉——目前正在重构）

我正在制作一个目录，当我单击其父组件时，嵌套内容会出现在该目录中。

根据我的逻辑，我需要将列表 key 的值传递给它的子项，但我不断收到未定义的错误或什么都没有。我试图传递这样的值：key={node2.objectId} 和 keyId={node2.objectId}

我阅读了有关如何将 key 值作为道具 here 和 here 传递的规范

然而，没有任何效果。

这是我的代码：

import React from "react";

const TocContent = (props) => {
    return (
        <div className="">
            {props.TOC.map((header) => (
                <ul
                    key={header.objectId}
                    onMouseDown={(e) => e.stopPropagation()}
                    onClick={(e) =>
                        props.handleHeaderClick(
                            header.level,
                            header.treepath,
                            header.containsLaw,
                            header.sections,
                            header.secNum,
                            header.objectId,
                            header.id,
                            e.stopPropagation(),
                        )
                    }
                    className="TOC TOCsection"
                >
                    {header._id}

                    {props.headerIndex === header.objectId
                        ? props.headers2.map((node2) => (
                                <HeaderList
                                    key={node2.objectId}
                                    header={node2}
                                    props={props}
                                    keyId={node2.objectId}
                                >
                                            {console.log(props.keyId)}
                          //--problem is here-- {props.headerIndex2 === props.keyId
                                        ? props.headers3.map((node3) => (
                                                <HeaderList
                                                    key={node3.objectId}
                                                    header={node3}
                                                    props={props}
                                                >
                                                    {props.headerIndex3 === node3.objectId
                                                        ? props.headers4.map((node4) => (
                                                                <HeaderList
                                                                    header={node4}
                                                                    key={node4.objectId}
                                                                    props={props}
                                                                />
                                                          ))
                                                        : null}
                                                </HeaderList>
                                          ))
                                        : null}
                                </HeaderList>
                          ))
                        : null}
                </ul>
            ))}
        </div>
    );
};

const HeaderList = ({ header, props }) => {
    return (
        <ul
            onMouseDown={(e) => e.stopPropagation()}
            onClick={(e) =>
                props.handleHeaderClick(
                    header.level,
                    header.treepath,
                    header.containsLaw,
                    header.sections,
                    header.secNum,
                    header.objectId,
                    header.id,
                    e.stopPropagation(),
                )
            }
        >
            {header._id}
        </ul>
    );
};

export default TocContent;

【问题讨论】：

您将整个节点作为 header 属性向下传递。你能不能不使用HeaderList 中的header.objectId 来获取key 属性的值？
@Tholle 我使用 header.objectId 来保存组件的 headerIndex。我在我的逻辑中使用该值：props.headerIndex === header.objectId.
是的，但问题是您无法读取HeaderList 组件中的key 属性，对吧？为什么不直接使用 header.objectId 的值，因为它是一样的？
我明白你的意思。当我使用 console.log(header.objectId) 时，我得到了整个对象（8 个“objectId”而不是 1 个）。在我的代码的前几行中，它可以工作，因为每个

标签： reactjs list jsx

【解决方案1】：

我终于稍微改变了结构。而不是上面的代码，我选择直接在它自己的组件中渲染HeaderList 组件（作为它自己的子组件）。这样，我就可以阅读header.objectId 并使代码更短。

这是新代码：

import React from "react";

const TocContent = (props) => {
    return (
        <div className="">
            {props.TOC.map((header) => (
                <HeaderList key={header.objectId} header={header} props={props} />
            ))}
        </div>
    );
};

const HeaderList = ({ header, props }) => {
    return (
        <ul
            onMouseDown={(e) => e.stopPropagation()}
            onClick={(e) =>
                props.handleHeaderClick(
                    header.level,
                    header.treepath,
                    header.containsLaw,
                    header.sections,
                    header.secNum,
                    header.objectId,
                    header.id,
                    e.stopPropagation(),
                )
            }
        >
            {header._id}
            {/* // if savedIndex === CurrentParent Index */}
            {props.headerIndex === header.objectId &&
                props.headers2.map((node2) => (
                    <HeaderList key={node2.objectId} header={node2} props={props} />
                ))}
            {props.headerIndex2 === header.objectId &&
                props.headers3.map((node3) => (
                    <HeaderList key={node3.objectId} header={node3} props={props} />
                ))}
            {props.headerIndex3 === header.objectId &&
                props.headers4.map((node4) => (
                    <HeaderList header={node4} key={node4.objectId} props={props} />
                ))}
        </ul>
    );
};

export default TocContent;

我知道这可能不是最干净的代码，但仍然是一种改进。如果有人想提出更好的建议，将不胜感激。

【讨论】：