Question

在我的反应组件中，我的UI加载完美，但是有一个控制台错误，我想修复以下错误：“ Each child in a list should have a unique "key" prop”。指导我如何将密钥传递给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

列表中的每个孩子都应该有一个唯一的“关键”道具

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

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

See CodeSandbox

使用元素，请参阅Meir's answer below。

Answer 2

您可以使用React.cloneElement添加密钥

const detailsContent = [header, line, body].map(
  (element, index) => React.cloneElement(element, {key: index})
);

反应-列表中的每个孩子都应该有一个唯一的“关键”道具

2 个答案: