reactjs：Es6 无法理解语法

Question

我正在使用 React 钩子表单并遇到了这个使用 Controller for material ui TextField

的例子

({ field: { ref, ...field } }) => (
                  <TextField
                    {...field}
                    inputRef={ref}
                    fullWidth
                    required
                    label="Current Password"
                    type="password"
                    margin="dense"
                  />
                )

下面是什么意思

({ field: { ref, ...field } })

还有{...field}（它扩展到什么）

                  <TextField
                    {...field}
                    inputRef={ref}
                    fullWidth
                    required
                    label="Current Password"
                    type="password"
                    margin="dense"
                  />

总代码为

              <Controller
                name="old_password"
                control={control}
                render={({ field: { ref, ...field } }) => (
                  <TextField
                    {...field}
                    inputRef={ref}
                    fullWidth
                    required
                    label="Current Password"
                    type="password"
                    margin="dense"
                  />
                )}
              />

Answer 1

这不是一个常规组件...这样想：

const Component = (props) =>{
    const {ref, ...field} = props.field
    return(
          <TextField
            {...field}
            inputRef={ref}
            fullWidth
            required
            label="Current Password"
            type="password"
            margin="dense"
          />
    )
} 

...field 只是扩展的原始字段 props.field 减去 ref 属性。在这种情况下，必要的原因 TextField 期望 ref 由 inputRef

持有