React组件属性调用函数时传递参数遇id未定义问题求解

你遇到的问题是因为传递给toggle属性的ToggleTipBtn函数在被调用时，没有接收到id参数。当你直接写toggle={ToggleTipBtn}时，自定义ToolTip组件内部调用这个函数时并没有传入你期望的id值，导致函数里的id始终是undefined。

解决方法 #

方法1：用箭头函数手动传递id #

在给toggle属性赋值时，用箭头函数包裹ToggleTipBtn，主动传入ToolTip的id：

<ToolTip
  id='helpTipBtn'
  toggle={() => ToggleTipBtn('helpTipBtn')}  
/>

这样每次ToolTip触发toggle回调时，都会把'helpTipBtn'作为参数传给ToggleTipBtn，函数里就能拿到正确的id值。

方法2：修改自定义ToolTip组件的实现 #

如果你有权限修改ToolTip组件的代码，可以在组件内部调用toggle回调时，把自身的id属性传进去。比如ToolTip组件的核心逻辑可以调整为：

const ToolTip = ({ id, toggle }) => {
  // 假设某个操作触发toggle回调
  const handleToggle = () => {
    toggle(id); // 这里传入当前组件的id参数
  };

  return <button onClick={handleToggle}>触发提示</button>;
};

修改后，你就可以像原来那样直接传递toggle={ToggleTipBtn}，函数会自动收到id参数。

额外注意点 #

你的MainComponent的return部分存在语法错误：React组件的返回值必须是单个根元素，需要把Radio和ToolTip用Fragment（<>）或者容器元素包裹：

return(
  <>
    <Radio
      id='button1'
      label='someRadioButton'
    />
    <ToolTip
      id='helpTipBtn'
      toggle={() => ToggleTipBtn('helpTipBtn')}  
    />
  </>
)

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