React onClick callAll 函数语法

Question

我最近开始更深入地学习 React，因为我无法理解这种语法（我知道是 ES6 的东西），所以有些东西触发了我

所以我得到了这个组件，让我们调用它，这个组件将接收一个 onClick 函数作为带有一个参数的道具，所以我们有 handleClick("clicked")}/>

这个组件，有一个callAll函数，是这样实现的

const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args))

const Component = ({children: child}) => {
return React.cloneElement(child, {
    onClick: callAll(() => setIsOpen(true), child.props.onClick),
  })
}

我的问题是 ...args 是从哪里来的，'callAll' 的内部函数是如何通过键入 '...args' 神奇地接收每个特定函数的所有 args 的？

希望我自己解释一下，谢谢！

Answer 1

const callAll... 语句创建一个箭头函数，当您调用它时会创建一个箭头函数。在传统的函数语法中，它看起来像这样：

function callAll(...fns) {
    return function(...args) {
        fns.forEach(function(fn) {
            fn && fn(...args);
        });
    };
}

因此，您传递的参数callAll 是要调用的函数（它们被收集到fns 数组中）。当您调用它时，您会返回一个函数，该函数将使用任何调用它的参数（收集到 args 数组中）调用所有这些函数：

const callLogAndError = callAll(console.log, console.error);
// fns −−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^^
callLogAndError(1, 2, 3); 
// args −−−−−−−−^^^^^^^

活生生的例子：

const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args));

const callLogAndError = callAll(console.log, console.error);
// fns −−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^^
callLogAndError(1, 2, 3); 
// args −−−−−−−−^^^^^^^

所以稍后，在onclick：

callAll(() => setIsOpen(true), child.props.onClick)

这将创建一个函数，该函数将使用它接收的参数调用这两个函数（对于onClick，这将只是事件的事件对象）：

1. () => setIsOpen(true)
2. child.props.onClick

如果没有callAll，onClick 也可以这样写：

onClick: (event) => {
    setIsOpen(true);
    child.props.onClick(event);
}