两个按钮都获得相同的图标（始终是第一个按钮的图标），尽管为每个按钮设置了 2 个不同的图标

Question

我正在尝试在 React 中构建一个基本的幻灯片组件。有 2 个按钮。我有 LeftArrow 和 RightArrow 图标作为 jsx 组件。现在，无论第二个按钮设置哪个图标，它总是复制第一个按钮的图标。这是代码：

滑块.jsx：

import React from 'react'
import RightArrow from "../assets/icons/RightArrow"
import LeftArrow from "../assets/icons/LeftArrow"

function Slider() {
  return (
    <section className='home--section-wrapper'>
        <button><LeftArrow/></button>
        <button><RightArrow/></button>
    </section>
  )
}

export default Slider

RightArrow.jsx :

import React from 'react'

function RightArrow() {
  return (
    <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
      <rect width="100" height="100" fill="url(#pattern0)"/>
      <defs>
      <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
      <use xlinkHref="#image0_216_2" transform="scale(0.01)"/>
      </pattern>
      <image id="image0_216_2" width="100" height="100" xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABIklEQVR4nO3dMU7EMABFwT0SXIdut+IGtFycfQghCqSlzheZ6dxZebHTRPblAgAAAAAAwGGqJ49/RPVe3avXo+dyen3H+CHKkarn6qPfvsa307+pB0a5PohipRwpUfYkyp5E2ZMoexJlT6LsSZQ9ibInUfYkyp5E2ZMoexJlT6LsSZQ9ibInUfYkyp5E2ZMoexJlT6LsSZQ9ibInUfYkyp5E2VPd/vjB+3r03E6rxyvla/xy9NxOKUF2ZMvakY/6jsTYkRg7EmNHYuxIjB2JsSMxdiTGjsTYkRg7EmNHYuxIjB2JsSMxdiTGjsTYkRg7EmNHYuxIjB2JsSMxdiTGjsTYkRg7EmNHDuPfU705hH8zyt2FLkNy5REAAAAAAMDlv/kEAny3FazsZ1QAAAAASUVORK5CYII="/>
      </defs>
    </svg>
  )
}

export default RightArrow

左箭头.jsx：

import React from 'react'

function LeftArrow() {
  return (
    <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
      <rect width="100" height="100" fill="url(#pattern0)"/>
      <defs>
      <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
      <use xlinkHref="#image0_216_3" transform="scale(0.01)"/>
      </pattern>
      <image id="image0_216_3" width="100" height="100" xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABH0lEQVR4nO3dwU3DQBRF0ZQEtVABWdEFW3pGcFGkREhQgB/knN149aWr8Sxs2acTAAAAAAAA/0r1cPQMXFXP1Uf1drvG8TFuRDkwxvlHjK7rx8OGulf93hkXn9XL0bPdncTYkRg7EmNHYuxIjB2JsSMxdiTGjsTYkRg7EmNHYuxIjB2JsSMxdiTGjsTYkRg7EmNHYuxIjB1iDBFjiBhDxBgixhAx9mNc1uejZ7s71VP17sXnEYIMcssa5FAfJMogUQaJMkiUQaIMygOqPYmyJ1H2JMqeRNmTKHsSZU+i7EmUPYmyJ1H2JMqeRNmTKHsSZU+i7EmUPYmyJ1H2JMqeRNmTKHvyMf4/sVNej57p7vUdRYwV+eURAAAAAADA6Uhfe323E5njGc8AAAAASUVORK5CYII="/>
      </defs>
    </svg>
  )
}

export default LeftArrow

我已经尝试过了：

1. 清理浏览器缓存
2. 将图标作为 svg 直接插入 Slider.jsx，而不创建组件。
3. 使用不同的浏览器
4. 在开发工具中检查，它显示正在渲染正确的图标

我知道还有其他方法可以做到这一点，但我只是想知道这里出了什么问题。 我觉得我错过了一些明显的东西。因此，任何帮助将不胜感激。

Answer 1

RightArrow 和 LeftArrow 组件都使用相同的 SVG 模式 (#pattern0)，并且它们的图像也具有相同的 id 属性 (#image0_216_2 和 #image0_216_3)。这可能会导致在页面上渲染 SVG 时发生冲突。

要解决此问题，您可以修改 SVG 组件以使用图案和图像的唯一 ID。具体方法如下：

// RightArrow.jsx

import React from 'react';

function RightArrow() {
  return (
    <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
      <rect width="100" height="100" fill="url(#rightPattern)"/>
      <defs>
        <pattern id="rightPattern" patternContentUnits="objectBoundingBox" width="1" height="1">
          <use xlinkHref="#rightImage" transform="scale(0.01)"/>
        </pattern>
        <image id="rightImage" width="100" height="100" xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABIklEQVR4nO3dMU7EMABFwT0SXIdut+IGtFycfQghCqSlzheZ6dxZebHTRPblAgAAAAAAwGGqJ49/RPVe3avXo+dyen3H+CHKkarn6qPfvsa307+pB0a5PohipRwpUfYkyp5E2ZMoexJlT6LsSZQ9ibInUfYkyp5E2ZMoexJlT6LsSZQ9ibInUfYkyp5E2ZMoexJlT6LsSZQ9ibInUfYkyp5E2VPd/vjB+3r03E6rxyvla/xy9NxOKUF2ZMvakY/6jsTYkRg7EmNHYuxIjB2JsSMxdiTGjsTYkRg7EmNHYuxIjB2JsSMxdiTGjsTYkRg7EmNHYuxIjB2JsSMxdiTGjsTYkRg7EmNHDuPfU705hH8zyt2FLkNy5REAAAAAAMDlv/kEAny3FazsZ1QAAAAASUVORK5CYII="/>
      </defs>
    </svg>
  );
}

export default RightArrow;

//LeftArrow.jsx

import React from 'react';

function LeftArrow() {
  return (
    <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
      <rect width="100" height="100" fill="url(#leftPattern)"/>
      <defs>
        <pattern id="leftPattern" patternContentUnits="objectBoundingBox" width="1" height="1">
          <use xlinkHref="#leftImage" transform="scale(0.01)"/>
        </pattern>
        <image id="leftImage" width="100" height="100" xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABH0lEQVR4nO3dwU3DQBRF0ZQEtVABWdEFW3pGcFGkREhQgB/knN149aWr8Sxs2acTAAAAAAAA/0r1cPQMXFXP1Uf1drvG8TFuRDkwxvlHjK7rx8OGulf93hkXn9XL0bPdncTYkRg7EmNHYuxIjB2JsSMxdiTGjsTYkRg7EmNHYuxIjB2JsSMxdiTGjsTYkRg7EmNHYuxIjB1iDBFjiBhDxBgixhAx9mNc1uejZ7s71VP17sXnEYIMcssa5FAfJMogUQaJMkiUQaIMygOqPYmyJ1H2JMqeRNmTKHsSZU+i7EmUPYmyJ1H2JMqeRNmTKHsSZU+i7EmUPYmyJ1H2JMqeRNmTKHvyMf4/sVNej57p7vUdRYwV+eURAAAAAADA6Uhfe323E5njGc8AAAAASUVORK5CYII="/>
      </defs>
    </svg>
  );
}

export default LeftArrow;

通过使用唯一的 ID（rightPattern、rightImage、leftPattern 和 leftImage），可以避免 RightArrow 和 LeftArrow 组件中使用的 SVG 图案和图像之间的冲突。这应该可以防止图标混淆并为每个按钮呈现正确的图标。