React组件整合TokenPairImage报错：图片路径无法添加求助

我尝试将负责获取图片路径的组件代码整合到TopFarmPool组件中，但无论怎么操作都会报错，无法成功引入图片路径。

可独立运行的代码 #

目标工作组件（TopFarmPool） #

import React from 'react'
import styled from 'styled-components'
import { Flex, Skeleton, Text } from '@pancakeswap/uikit'
import Balance from 'components/Balance'
import { useTranslation } from 'contexts/Localization'

interface TopFarmPoolProps {
  title: string
  percentage: number
  index: number
  visible: boolean
}

const StyledWrapper = styled(Flex)<{ index: number }>`
  position: relative;
`

const AbsoluteWrapper = styled(Flex)<{ visible: boolean; index: number; topOffset: string }>`
  position: absolute;
  top: ${({ topOffset }) => topOffset};
  opacity: ${({ visible }) => (visible ? 1 : 0)};
  margin-top: ${({ visible }) => (visible ? 0 : `50%`)};
  transition: opacity, margin-top, 0.4s ease-out;
  flex-direction: column;

  ${({ index, theme }) =>
    index > 0
      ? `
         ${theme.mediaQueries.sm} {
           height: 80px;
           top: 0;
           padding-left: 16px;
           border-left: 1px ${theme.colors.inputSecondary} solid;
         }
       `
      : `padding-right: 16px;`}
`

const TopFarmPool: React.FC<TopFarmPoolProps> = ({ title, percentage, index, visible }) => {
  const { t } = useTranslation()

  const topOffset = () => {
    if (index >= 0 && index < 2) {
      return '0px'
    }

    if (index >= 2 && index < 3) {
      return '80px'
    }

    return '160px'
  }

  return (
    <StyledWrapper index={index}>
      <AbsoluteWrapper index={index} visible={visible} topOffset={topOffset()}>
        {title ? (
          <Text bold mb="8px" fontSize="12px" color="secondary">
            {title}
          </Text>
        ) : (
          <Skeleton width={80} height={12} mb="8px" />
        )}
        {percentage ? (
          <Balance lineHeight="1.1" fontSize="16px" bold unit="%" value={percentage} />
        ) : (
          <Skeleton width={60} height={16} />
        )}
        {percentage ? (
          <Text fontSize="16px" color="textSubtle">
            {t('APR')}
          </Text>
        ) : (
          <Skeleton width={30} height={16} mt="4px" />
        )}
      </AbsoluteWrapper>
    </StyledWrapper>
  )
}

export default TopFarmPool

获取图片路径的工作组件 #

import React from 'react'
import { TokenPairImage, ImageProps } from '@pancakeswap/uikit'
import { mainnetTokens } from 'config/constants/tokens'

const CakeVaultTokenPairImage: React.FC<Omit<ImageProps, 'src'>> = (props) => {
  const primaryTokenSrc = `/images/tokens/${mainnetTokens.cake.address}.svg`

  return <TokenPairImage primarySrc={primaryTokenSrc} secondarySrc="/images/tokens/autorenew.svg" {...props} />
}

export default CakeVaultTokenPairImage

尝试整合后报错的代码 #

import React from 'react'
import styled from 'styled-components'
import { Flex, Skeleton, Text } from '@pancakeswap/uikit'
import Balance from 'components/Balance'
import { useTranslation } from 'contexts/Localization'
import { TokenPairImage, ImageProps } from '@pancakeswap/uikit'
import { mainnetTokens } from 'config/constants/tokens'

interface TopFarmPoolProps {
  title: string
  percentage: number
  index: number
  visible: boolean
}

const StyledWrapper = styled(Flex)<{ index: number }>`
  position: relative;
`

const AbsoluteWrapper = styled(Flex)<{ visible: boolean; index: number; topOffset: string }>`
  position: absolute;
  top: ${({ topOffset }) => topOffset};
  opacity: ${({ visible }) => (visible ? 1 : 0)};
  margin-top: ${({ visible }) => (visible ? 0 : `50%`)};
  transition: opacity, margin-top, 0.4s ease-out;
  flex-direction: column;

  ${({ index, theme }) =>
    index > 0
      ? `
         ${theme.mediaQueries.sm} {
           height: 80px;
           top: 0;
           padding-left: 16px;
           border-left: 1px ${theme.colors.inputSecondary} solid;
         }
       `
      : `padding-right: 16px;`}
`

const TopFarmPool: React.FC<TopFarmPoolProps> = ({ title, percentage, index, visible }) => {
  const { t } = useTranslation()

  const topOffset = () => {
    if (index >= 0 && index < 2) {
      return '0px'
    }

    if (index >= 2 && index < 3) {
      return '80px'
    }

    return '160px'
  }

  return (
    <StyledWrapper index={index}>
      <AbsoluteWrapper index={index} visible={visible} topOffset={topOffset()}>


      // THIS IS WHERE I WANT TO EXECUTE THE CODE. //
     <TokenPairImage primarySrc={primaryTokenSrc} secondarySrc="/images/tokens/autorenew.svg" {...props} />



        {title ? (
          <Text bold mb="8px" fontSize="12px" color="secondary">
            {title}
          </Text>
        ) : (
          <Skeleton width={80} height={12} mb="8px" />
        )}
        {percentage ? (
          <Balance lineHeight="1.1" fontSize="16px" bold unit="%" value={percentage} />
        ) : (
          <Skeleton width={60} height={16} />
        )}
        {percentage ? (
          <Text fontSize="16px" color="textSubtle">
            {t('APR')}
          </Text>
        ) : (
          <Skeleton width={30} height={16} mt="4px" />
        )}
      </AbsoluteWrapper>
    </StyledWrapper>
  )
}

export default TopFarmPool

问题分析与修复代码 #

报错原因 #

1. primaryTokenSrc 未定义：整合时直接使用了该变量，但未在TopFarmPool组件内部声明。
2. props 变量不存在：TopFarmPool的props仅包含title/percentage/index/visible，没有ImageProps相关属性，直接展开{...props}会报错。

修复后的完整代码 #

import React from 'react'
import styled from 'styled-components'
import { Flex, Skeleton, Text, TokenPairImage } from '@pancakeswap/uikit'
import Balance from 'components/Balance'
import { useTranslation } from 'contexts/Localization'
import { mainnetTokens } from 'config/constants/tokens'

interface TopFarmPoolProps {
  title: string
  percentage: number
  index: number
  visible: boolean
}

const StyledWrapper = styled(Flex)<{ index: number }>`
  position: relative;
`

const AbsoluteWrapper = styled(Flex)<{ visible: boolean; index: number; topOffset: string }>`
  position: absolute;
  top: ${({ topOffset }) => topOffset};
  opacity: ${({ visible }) => (visible ? 1 : 0)};
  margin-top: ${({ visible }) => (visible ? 0 : `50%`)};
  transition: opacity, margin-top, 0.4s ease-out;
  flex-direction: column;
  align-items: flex-start;

  ${({ index, theme }) =>
    index > 0
      ? `
         ${theme.mediaQueries.sm} {
           height: 80px;
           top: 0;
           padding-left: 16px;
           border-left: 1px ${theme.colors.inputSecondary} solid;
         }
       `
      : `padding-right: 16px;`}
`

const StyledTokenPairImage = styled(TokenPairImage)`
  margin-bottom: 8px;
  width: 48px;
  height: 48px;
`

const TopFarmPool: React.FC<TopFarmPoolProps> = ({ title, percentage, index, visible }) => {
  const { t } = useTranslation()
  // 声明图片路径变量
  const primaryTokenSrc = `/images/tokens/${mainnetTokens.cake.address}.svg`

  const topOffset = () => {
    if (index >= 0 && index < 2) {
      return '0px'
    }

    if (index >= 2 && index < 3) {
      return '80px'
    }

    return '160px'
  }

  return (
    <StyledWrapper index={index}>
      <AbsoluteWrapper index={index} visible={visible} topOffset={topOffset()}>
        {/* 添加图片组件及加载状态 */}
        {primaryTokenSrc ? (
          <StyledTokenPairImage 
            primarySrc={primaryTokenSrc} 
            secondarySrc="/images/tokens/autorenew.svg" 
          />
        ) : (
          <Skeleton width={48} height={48} mb="8px" />
        )}
        
        {title ? (
          <Text bold mb="8px" fontSize="12px" color="secondary">
            {title}
          </Text>
        ) : (
          <Skeleton width={80} height={12} mb="8px" />
        )}
        {percentage ? (
          <Balance lineHeight="1.1" fontSize="16px" bold unit="%" value={percentage} />
        ) : (
          <Skeleton width={60} height={16} />
        )}
        {percentage ? (
          <Text fontSize="16px" color="textSubtle">
            {t('APR')}
          </Text>
        ) : (
          <Skeleton width={30} height={16} mt="4px" />
        )}
      </AbsoluteWrapper>
    </StyledWrapper>
  )
}

export default TopFarmPool

修复要点 #

• 在组件内部声明primaryTokenSrc变量，还原原图片组件的路径逻辑
• 移除无效的{...props}，若需传递图片额外属性，可扩展TopFarmPoolProps接口
• 添加StyledTokenPairImage控制图片尺寸，避免破坏原有布局
• 给图片添加加载状态的Skeleton，保持与其他元素的风格统一

内容的提问来源于stack exchange，提问作者LeadeR