Я кодировал компонент гибкой кнопки, в котором я передаю некоторые значения по параметрам (текст, класс, размер, значок и т. д.), и когда я выполняю условие (если это ссылка или кнопка) перед возвратом 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
Условием для этого триггера является передача массива в списке дочерних элементов.
Вы делаете это ближе к концу:
return (<button className = {`${checkClasses()} ${checkSizes()}`} onClick = {buttonOnClick}>{insertContent()}</button>);
...
return (<a className = {`${checkClasses()} ${checkSizes()}`} href = {buttonHref} target = {buttonTarget} >{insertContent()}</a>);
Ваши дети здесь являются результатом insertContent()
, который возвращает массив. Поскольку он возвращает массив, он выдает предупреждение, так как ключи не указаны.
Чтобы решить эту проблему, вам нужно изменить функцию insertContent
, чтобы включить ключи в элементы, которые она помещает в массив content
.