React按鈕組件請求keyprops-有解無憂

我一直在撰寫一個靈活的按鈕組件，在其中我通過引數（文本、類、大小、圖示等）傳遞一些值，當我在回傳 HTML 之前執行條件（如果它是鏈接或按鈕）時，它會詢問我要一個關鍵道具。如果它不是串列，為什么它要求一個關鍵道具。我什至沒有通過任何陣列來回傳值。

這是 React 按鈕組件代碼：

import React from "react";
import "./button.css";

import { Icon } from '../Icon/icon';

const buttonTypes = [
    "button",
    "a"
];

const buttonClasses = [
    "app-button",
    "app-button-filled",
    "app-button-outlined",
    "app-button-icon"
];

const buttonSizes = [
    "app-button-large",
    "app-button-icon-large"
];

export const Button = ({
    buttonIcon = {
        name: '',
        style: '',
        position: ''
    },
    buttonText,
    buttonType,
    buttonTarget,
    buttonHref,
    buttonOnClick,
    buttonClass,
    buttonSize
}) => {

    const checkClasses = () => {
        if(buttonClasses.includes(buttonClass)){
            return buttonClasses[0] " " buttonClass;
        } else {
            return buttonClasses[0];
        }
    }

    const checkSizes = () => {
        if(buttonSizes.includes(buttonSize)){
            return buttonSize;       
        } else {
            return '';
        }
    }

    const checkTypes = () => {
        if(buttonTypes.includes(buttonType)){
            return buttonType;
        } else {
            return buttonTypes[0];
        }
    }

    const insertContent = () => {
        let content = [],
            iconTag = <Icon iconName={buttonIcon.name} iconStyle={buttonIcon.style} iconClass="app-button-svg" />;

        if(buttonClass === "app-button-icon"){
            content.push(iconTag);
        } else {
            if(buttonText){ content.push(<span className="app-button-text">{buttonText}</span>); }
            
            if(buttonIcon){
                if(buttonIcon.position === "left"){
                    content.unshift(iconTag);
                } else if(buttonIcon.position === "right" || buttonIcon.position !== "left") {
                    content.push(iconTag);
                }
            }
        }

        return content;
    }

    if(checkTypes() === "button"){
        return (<button className={`${checkClasses()} ${checkSizes()}`} onClick={buttonOnClick}>{insertContent()}</button>);
    } else if(checkTypes() === "a"){
        return (<a className={`${checkClasses()} ${checkSizes()}`} href={buttonHref} target={buttonTarget} >{insertContent()}</a>);
    }
}

警告代碼：

Warning: Each child in a list should have a unique "key" prop | button.js:84

uj5u.com熱心網友回復：

此觸發器的條件是在子串列中傳遞一個陣列。

你在接近尾聲時這樣做：

return (<button className={`${checkClasses()} ${checkSizes()}`} onClick={buttonOnClick}>{insertContent()}</button>);
...
return (<a className={`${checkClasses()} ${checkSizes()}`} href={buttonHref} target={buttonTarget} >{insertContent()}</a>);

您的孩子是的結果insertContent()，它回傳一個陣列。因為它回傳一個陣列，所以它會觸發警告，因為沒有指定鍵。

要解決這個問題，您需要更改函式insertContent以在它放入content陣列的元素上包含鍵

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/457377.html

標籤：反应按钮钥匙

上一篇：如何在Android上將資料從類發送到活動

下一篇：樣式不適用于Kotlin