你可以这样做：

function MyFormField({
  isDisabled,
  inputLabel,
  inputName,
  hasError,
  onChange,
  customOnChange = null,
  value,
  customValue = null
  //otherProps
}) {
  return (
    <TextField
      disabled={isDisabled}
      label={inputLabel}
      name={inputName}
      error={hasError}
      //other props
      onChange={customOnChange || onChange}
      value={customValue || value}
    />
  );
}

所以customValue和customOnChange是可选的，默认为null。只有当你把它们放在组件 prop 中时，它们才会被使用。

<MyFormField
  // these are common between all your form fields:
  value={value}
  onChange={handleChange}
  //these you can put wherever you like and will override the previous ones:
  customValue={customValue}
  customOnChange={handleCustomChange}
  //...other props
/>

编辑：

为了使value和onCahnge可选，也可以使用***默认函数参数***。

(onChange = null,
customOnChange = null,
value = null,
customValue = null,)

但是您需要小心，因为在调用组件时您可能忘记提供默认和自定义的props，并且您不会看到任何错误，但是您的代码将中断，因为这两个props都是null。

Typescript版本

具有?的类型是可选的。

function MyFormField({
  isDisabled,
  inputLabel,
  inputName,
  hasError,
  //other props
  onChange = null,
  customOnChange = null,
  value = null,
  customValue = null,
}: {
  isDisabled: boolean;
  inputLabel: string;
  inputName: string;
  hasError: boolean;
  //other props types
  //change these 'any' types based on your desired design:
  onChange?: any;
  customOnChange?: any;
  value?: any;
  customValue?: any;
}) {
  return (
    <TextField
      disabled={isDisabled}
      label={inputLabel}
      name={inputName}
      error={hasError}
      //other props
      onChange={customOnChange || onChange}
      value={customValue || value}
    />
  );
}