反应钩子形式：as vs render：无法理解语法以及它们如何相同

我在反应钩子形式中看到使用as并且render

Eg:

    <Controller
      render={({ field }) => <input {...field} />}
      name="firstName"
      control={control}
      defaultValue=""
    />

or

    <Controller
      as={<input .. />}
      name="firstName"
      control={control}
      defaultValue=""
    />

有什么不同

<Controller/>最好与外部受控组件一起使用（例如 Material-UI）来包装整个组件，并且控制更容易。render当您想要自定义外部组件时很有用as只是渲染原始组件。使用示例render可能：

import { TextField } from '@mui/material';
import { Controller } from 'react-hook-form';

const FormTextField = ({
  label,
  name,
  ...props
}) => {
  return (
      <Controller
        name={name}
        render={({ field, fieldState: { error } }) => (
          <TextField
            {...field}
            label={label}
            error={!!error}
            helperText={error ? error?.message : ''}
          />
        )}
        {...props}
      />
  );
};

如你看到的，render使您能够访问 Material UI 组件中的不同值（例如错误），但这并不容易做到as.

详细了解您可以访问哪些属性render at https://react-hook-form.com/api/usecontroller/controller https://react-hook-form.com/api/usecontroller/controller

这个例子也很有帮助：https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5 https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5