是否有可能在不传递许多参数的情况下分离函数?反应

Question

我向页面添加了一个组件，并将value参数传递给它。在呈现之前，在组件中运行一个验证函数来查找不匹配项。

export default function Example({value}) {
const [error,setError] = useState(false)
let min = 5
let max = 10
validation()
function validation() {
if(value<min) return  setError(true)
if(value>max) return  setError(true)
}
return(
<>
<div>{value}</div>
{error && <div>ERROR</div>}
</>
)
}

我想将验证移动到一个单独的文件中。然后我要把所有的参数传递给这个函数。在实际项目中，这是一个很大的函数，有很多选项。这个方法在我看来很不方便，而且很难维护。

validation(min,max,value,setError)

有没有一种方法来分离一个函数而不传递几十个参数给它?

Answer 1

您可以在单独的自定义钩子中提取validation函数的逻辑，并在组件代码开始执行时开始调用它。该钩子的唯一职责是根据validation函数的逻辑决定error的值，并将其返回给组件。

更多信息请参考