映射函数未应用于所有表达式

Question

我正在尝试使用map函数over，types数组来渲染流派名称和流派梯度。map函数适用于类型Name，但对于类型渐变，它返回相同的组件。

我试着查看控制台。我可以看到两种不同的颜色，但屏幕上的最终输出是相同颜色的"GenreGradient"组件。

请帮我做同样的事。

在我的代码下面找到。

import React, { useContext } from 'react';
import {
GenreContainer,
Genre,
GenreName
} from '../../styles/componentStyles/GenreDetails/genreCommonStyles';
import {
TheGrandPhilisophers,
GuidingLights,
ArchitectsOfFuture,
MaverickScientists,
Luminaries,
MenOfLetters
} from '../../styles/componentStyles/GenreDetails/genreDetails';
import GenreGradient from './GenreGradient';
import GenreFancyItemContext from '../../Context/genreFancyITem/GenreFancyItemContext';
const genres = [
{
genreName: 'guidingLights',
genreGradientColor: '#34e89e'
},
{
genreName: 'luminaries',
genreGradientColor: '#3b4490'
}
];
console.log(genres);
const GenreDetails = () => {
const genreFancyItemContext = useContext(GenreFancyItemContext);
const { getGenreName } = genreFancyItemContext;
return (
<GenreContainer>
{genres.map(genre => (
<Genre to={`/genreFancyitems/${genre.genreName}`}>
<GenreGradient genreColor={`${genre.genreGradientColor}`} />
<GenreName>{getGenreName(genre.genreName)}</GenreName>
</Genre>
))}
</GenreContainer>
);
};
export default GenreDetails;

import * as React from 'react';
const GenreGradient = props => {
console.log(props);
return (
<svg width={300} height={150} viewBox="0 0 92.704 53.017">
<defs>
<radialGradient
xlinkHref="#prefix__a"
id="prefix__b"
cx={-428.286}
cy={25.74}
fx={-428.286}
fy={25.74}
r={46.352}
gradientTransform="matrix(-.81297 -1.42269 1.99784 -1.14162 -241.802 -509.53)"
gradientUnits="userSpaceOnUse"
/>
<linearGradient id="prefix__a">
<stop offset={0} stopColor={props.genreColor} stopOpacity={0.808} />
<stop offset={1} stopColor={props.genreColor} stopOpacity={0} />
</linearGradient>
</defs>
<path
fill="url(#prefix__b)"
fillRule="evenodd"
d="M65.201 70.403h92.604v52.917H65.201z"
transform="translate(-65.15 -70.353)"
/>
</svg>
);
};
export default GenreGradient;

Answer 1

ID在页面中是全局的。渲染后，您有两个id相同的元素。当您尝试使用它(xlinkHref="#prefix__a"，fill="url(#prefix__b)"(时，将使用第一个元素。

不同的元素必须使用不同的ID。例如，您可以使用genreName作为ID的前缀。