如何向组件prop传入返回布尔值的函数？传值不生效怎么办

你的写法不生效是几个逻辑错误导致的：

• 组件定义的myprop要求接收布尔类型值，你现在传的是个匿名箭头函数，组件拿到的是函数引用，不是true/false，类型完全不匹配，自然无法正常工作。
• 你写的内联箭头函数用花括号包裹了逻辑，没有写return，就算你想拿到函数执行结果，这个箭头函数跑起来默认返回undefined，根本拿不到预期的布尔值。
• 你写的myfunction本身也有漏洞：如果传入的input既不是0也不是1，函数会返回undefined，也不是合法的布尔值。

直接把myfunction执行后的返回值传给prop即可，不需要额外套一层匿名函数：

const myfunction = (input) => {
  // 简化逻辑同时补全兜底，保证永远返回布尔值
  return input === 0
  // 要保留原来的if写法也可以，记得补全兜底返回
  // if (input == 0) return true
  // if (input == 1) return false
  // return false
}

// 直接传入计算好的布尔值，input为响应式值时变化会自动更新
<Component myprop={myfunction(input)} />

特殊情况说明：如果组件文档明确要求myprop接收的是「返回布尔值的函数」（比如部分组件的权限控制、校验规则类prop），那才需要传函数引用，这时候要修正内联箭头函数的返回逻辑：

// 仅组件要求prop类型为函数时使用
<Component myprop={() => myfunction(input)} />

这里去掉了箭头函数的花括号，利用箭头函数隐式返回的特性，会正确把myfunction(input)的执行结果返回给组件。

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