在 React 项目中创建一个返回布尔值的函数答案

【问题标题】：Create a function which returns a boolean in React project在 React 项目中创建一个返回布尔值的函数
【发布时间】：2021-02-28 06:38:05
【问题描述】：

我有一些基于某个值是否存在的条件样式。该值可以存在也可以是null

background-color: ${myPropValue.myKey !== null ? 'pink' : 'green'};

这很好用。但是，我需要在此文件中添加一些基于相同逻辑的更多条件样式。

我尝试创建一个可以重复使用的函数：

const hasMyPropValue = ({ myPropValue }: Pick<MyType, 'myPropValue'>) =>
  myPropValue.myKey !== null;

当我想像 background-color: ${hasMyPropValue() ? 'pink' : 'green'}; 一样使用它时，我得到一个 linting 错误：Expected 1 arguments, but got 0.ts(2554)

我只是希望它返回真或假？

【问题讨论】：

标签： javascript reactjs function boolean

【解决方案1】：

根据我的观点，你用类名定义 css 属性。当${myPropValue.myKey !== null 然后你添加你想要的特定类。从此您可以定义多个属性。

【讨论】：

className = {myPropValue.myKey !== null? YourClassName: defaultClassName} 在 CSS 中定义这些必需的类。

【解决方案2】：

我尝试创建一个可以重复使用的函数：...我不想传递任何参数，我只想让它返回 true 或 false？

对于您所做的两个语句，myPropValue 必须被传递一个参数或在 hasMyPropValue 所在的范围内可用，因为您已按要求键入它。

【讨论】：

【解决方案3】：

当您不想传递任何参数时，您可以将参数定义为可选参数，如下所示，也可以为参数提供默认值。

function hasMyPropValue({
  myPropValue = {
    myKey: null
  }
}: {
  myPropValue? : Object
} = {}) {
  return myPropValue.myKey !== null;
}

console.log(hasMyPropValue() ? 'pink': 'green');

【讨论】：

谢谢。当我传递像${hasMyPropValue({myPropValue}) ? 'pink' : 'green'}; 这样的参数时，我们可以编写一个不那么冗长的函数吗？
我们可以创建另一个函数调用hasMyPropValue 来获取相应的类名。
如果只是样式的改变，那么这种做法就足够了。
我之前的意思是，如果${hasMyPropValue({myPropValue}) ? 'pink' : 'green'}; 这是您多次使用的条件，那么您可以创建另一个函数，例如getColor，它返回基于pink 或green关于hasMyPropValue的返回值。

【解决方案4】：

我的初始函数几乎是正确的：

const hasMyPropValue = ({ myPropValue }: Pick<MyType, 'myPropValue'>) =>
  myPropValue.myKey !== null;

但在这里我检查类型是否不是null 类型以及是否是undefined。这在这种情况下不起作用。

我更改了比较运算符（!= 而不是!==），然后我的函数就可以工作了。你可以阅读更多关于它的信息here。

const hasMyPropValue = ({ myPropValue }: Pick<MyType, 'myPropValue'>) =>
 myPropValue.myKey != null;

【讨论】：