onpress 的 JS React 短路

Question

如果参数启用 === false，我想禁用“onPress”，

工作方式如下：

const RightTitle = ({children, onPress, isEnabled}) => (
  <Right
    onPress={isEnabled === true ? onPress : console.log("chuchas")}
    isEnabled={isEnabled}>
    <CTALight>{children}</CTALight>
  </Right>
)

但是如果我做一个“短路”来避免三元，我会得到一个错误

onPress is not a function

const RightTitle = ({children, onPress, isEnabled}) => (
  <Right
    onPress={isEnabled && {onPress}  }
    isEnabled={isEnabled}>
    <CTALight>{children}</CTALight>
  </Right>
)

编辑：如果“onPress”没有括号，同样的问题

onPress={isEnabled && onPress  }

如何评估我的“isEnabled”以允许按下按钮？

提前致谢。

Answer 1

使用逻辑 AND (&&) 然后您需要在 child 中检查 onPress 回调是否有效。 false 和 undefined 不是函数，不能作为一个函数调用。

onPress={isEnabled && onPress}

右child组件

onPress && onPress()

或

onPress?.()

或者，您只需提供一个 NOOP 函数，Right 组件无需先检查即可调用。

onPress={isEnabled ? onPress : () => {}}

Answer 2

如果 isEnabled 为假，则 onPress === false，这不是函数。您需要在末尾附加一个空函数才能使这项工作正常进行。

onPress={isEnabled && onPress || (() => {})}

isEnabled = true;
onPress = () => console.log("press");

console.log(typeof (isEnabled && onPress));
console.log(typeof (isEnabled && onPress || (()=>{})));

isEnabled = false;

console.log(typeof (isEnabled && onPress));
console.log(typeof (isEnabled && onPress || (()=>{})));

Answer 3

您的 onPress 应该采用可以调用的函数。在 isEnabled 是 falsy 的情况下，您将在 return 中获得该虚假值（例如：如果它是 false 您将获得 false 返回，这不是一个函数）。您可以将您的调用包装在您自己的函数中，如果它是假的，它将 return isEnabled ，或者调用您的 onPress 处理程序：

onPress={() => isEnabled && onPress()}

onpress 的 JS React 短路

JS React short circuit for onpress

javascript

conditional-operator

reactjs