React动态代码报错：onClick需传入函数而非字符串类型求助

错误原因很明确：你的动态代码中，step是字符串类型的步骤名称（比如静态代码里的"question2"），但onClick需要传入函数，直接把字符串赋值给onClick就触发了类型错误。

对比静态代码的逻辑：Controls组件的render prop会传入一个包含destinations的对象，destinations里的每个属性（比如question2）都是跳转函数，这才是onClick需要的有效值。

修正后的动态代码 #

<div className="buttonContainer">
  <Controls>
    {({ destinations }) => (
      <>
        {block.nextTag.map((step, index) => (
          <button key={index} onClick={destinations[step]}>
            {block.nextTagDesc[index]}
          </button>
        ))}
      </>
    )}
  </Controls>
</div>

关键修正点 #

• 把Controls组件移到map外面，避免重复渲染多个Controls实例
• 从Controls提供的destinations对象中，通过字符串索引（destinations[step]）获取对应的跳转函数，而不是直接使用step字符串
• 给map循环的元素加上key属性，符合React的列表渲染规范

如果block.nextTag里的字符串和destinations的属性名完全对应，这样修改后就能正常触发步骤跳转了。

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