React NextJS：如何根据状态字符串动态传递对象作为Props

云原生阿岚

2026-7-16

解决动态字符串对应导入对象作为Props传递的问题

你遇到的核心问题是：状态type是字符串类型，而truck/car这类导入的图片是模块对象，直接把字符串传给image属性，Next.js的Image组件无法识别。要实现动态匹配，最直接的方式是用**映射表（对象）**关联字符串和对应的图片对象。

修改后的父组件代码：

// ================== 父组件 ===============================
import truck from '../images/truck.webp'
import car from '../images/car.webp'
import bus from '../images/bus.webp'

// 创建字符串到图片对象的映射表
const imageMap = {
  truck: truck,
  car: car,
  bus: bus
}

export default function Index() {
  const [ type, setType ] = useState('') 

  // 示例：用useEffect包裹初始化逻辑，避免直接在组件渲染阶段调用setState触发无限重渲染
  useEffect(() => {
    setType('truck')
  }, [])

  let typeElement = null
  // 增加判断，避免传入未定义的字符串导致报错
  if (type && imageMap[type]) {
    typeElement = 
    <Type
      key={type}
      image={imageMap[type]} // 通过映射表获取对应的图片对象
      type={type}/>
  }

  return (
    <>
      {typeElement}
    </>
  )
}

子组件代码（仅补充规范属性）：

//============== 子组件 =================
import Image from 'next/image'

function Type(props) {
  const { image, type } = props

  return (
    <>
      <p>I am a picture of a {type}</p>
      <Image src={image} alt={`Picture of a ${type}`} /> {/* 补充alt属性，符合可访问性规范 */}
    </>
  )
}