你可以这样做：

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是可选的，默认为空，只有放到组件props中才会用到。

<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,)

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

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}
    />
  );
}