javascript - React - 列表中的每个 child 都应该有一个唯一的 "key" Prop

Question

在我的 react 组件中， 我的 UI 加载完美但有控制台错误我想修复错误说 - '列表中的每个 child 都应该有一个唯一的“关键” Prop '用于下面的代码。 指导我如何将 key 传递给 detailsContent

render() {
    const header = (
        <div className={css.deviceDetailsBody}>
            <div className="sidebar__header">
                <div className="sidebar__title">
                    <div>
                        {hostname}
                        {this._renderCloser()}
                        <div className={"sidebar__subtitle"}>
                            <div className="toolsBar">
                                <div className="toolsBarlet">
                                    <div className="toolsItemNarrow">{deviceTypeView}</div>
                                    {complianceStatusView}
                                    <div className="toolsItemNarrow">{managementIpAddress}</div>
                                    {deviceUpTime}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
    const horizontalLine = <div className="sidebar__horiz_line" />;
    const body = (
        <div className="body">
            {tabs}
            {tools}
        </div>
    );

    const detailsContent = [header, horizontalLine, body].map(
        currentComponent => currentComponent
    );

    return (
        <div>
            {sideBarShow && (
                <Sidebar {...sidebarProps}>
                    <div>{detailsContent}</div>
                </Sidebar>
            )}
        </div>
    );
}

为了更清晰，添加了标题和正文代码。

Answer 1

Each child in a list should have a unique "key" prop

如果使用组件而不是普通的 jsx 元素，只需将 key 属性添加到 currentComponent jsx。请注意，为简单起见，我只是使用 index 作为键。

const detailsContent = [header, horizontalLine, body].map(
  (CurrentComponent, index) => (<CurrentComponent key={index} />)
);

See CodeSandbox

使用元素，请引用the accepted answer .