Question

我该如何将下面的功能checkStatus转换为可重用的钩子，以便在React中返回渲染组件中的布尔值。

   const someComponentChecker = (props) => {
     const { isEnabled, isTrueMode, datasItems } = props
     function checkStatus = (data, isEnabled) => {
       if(isTrueMode && !isEnabled){
         return !data.isUpdate
       }else if(!isEnabled){
         return !data.isCreate
       }else{
         return true
       }
     }

      return (
        datasItems && datasItems.map((data, index) => {
             return <SampleComponent
                       enabled={checkStatus(data, isEnabled)}
                    />
       })

      )

   }

感谢您的帮助。

Answer 1

自定义挂钩是一种JavaScript函数，其名称以“ use”开头，并且可以调用其他挂钩。

与React组件不同，自定义的Hook不需要具有特定的签名。我们可以决定将其作为参数，以及返回什么（如果有的话）。换句话说，它就像一个正常的功能。它的名称应始终以使用开头，以便您一眼就能知道Hooks的规则适用于它。

如果您认为自己的功能满足这些条件，则只需提取代码并创建一个带有前缀“ use”的新文件即可。

但是对于您的'checkStatus'，似乎您没有在其中使用任何钩子。并且它是一个非常简单的功能。也许您可以制作一个util函数，然后在任何需要的地方使用它。

在功能组件的React js中将函数更改为可重用的钩子

1 个答案: