React Hook Form中...(xxx,xxx)语法的圆括号有什么作用

你问的...(xxx, xxx)是JavaScript原生的逗号操作符语法，不属于React专属语法。

逗号操作符规则 #

• 从左到右依次执行括号内的所有表达式
• 整个括号表达式的最终返回值为最右侧表达式的结果，左侧所有表达式的返回值会被直接丢弃

对你的代码的分析 #

你写的自定义Input组件代码如下：

const Input = ({props}) => {
    return (
        <input type="text" {...props} {...props.reg}/>
    );
};

调用组件时传入的props：

<Input props={{
    placeholder: 'Name',
    id: 'form__name',
    name: 'name',
    reg: {...(register('name'), {required: true})}
}}/>

其中reg属性对应的(register('name'), {required: true})执行逻辑为：

1. 先执行register('name')，触发React Hook Form的字段注册逻辑
2. register('name')运行后返回的onChange、onBlur、ref、name等表单绑定必需的属性被直接丢弃
3. 括号整体仅返回{required: true}，最终被展开到reg对象中传入Input

注意：这个写法是错误的。你以为组件完成了注册，实际上核心的事件绑定、ref挂载属性都没有传入input元素，表单的值收集、校验触发都不会在这个输入框上正常生效。

正确写法 #

React Hook Form的register方法本身支持传入第二个参数作为校验配置，不需要用逗号操作符丢弃返回值，正确写法如下：

reg: {...register('name', {required: true})}

你参考的YouTube视频中的写法属于错误实现，没有实际参考价值。

内容的提问来源于stack exchange，提问作者Nikita Goncharov