未将Map函数应用于所有表达式

Question

[我正在尝试使用map函数over，genres数组渲染流派名称和流派梯度。map函数对于流派名称可以正常工作，但是对于流派梯度，它返回相同的分量。

我尝试在控制台上检查。我能够看到两种不同的着色器，但屏幕上的最终输出是具有相同颜色的“ GenreGradient”组件。

请提供帮助。

在我的代码下面找到Kindlly。

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的前缀。