React 按钮组件请求关键道具

Question

我一直在编写一个灵活的按钮组件，我在其中通过参数（文本、class、大小、图标等）传递一些值，当我执行条件时（如果它是 link 或按钮）在 returning HTML 之前，它要求我提供关键道具。如果它不是一个列表，为什么它要求一个关键道具。我什至没有通过任何数组来 return 值。

这是 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

Answer 1

此触发器的条件是传递 children 列表中的数组。

您正在执行此操作接近尾声：

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

你这里的children是insertContent()的结果，其中returns是一个数组。因为它 returns 是一个数组，所以它会触发警告，因为没有指定键。

要解决此问题，您需要更改函数 insertContent 以在其放入 content 数组

的元素上包含键

React 按钮组件请求关键道具

React button component asks for key props

key

button

reactjs