React-admin中无法解构参数的函数组件替换defaultProps方案

问题场景 #

现有一个React函数组件，代码如下：

import { formatFileNumber } from "@components";
import type { ClientCompliance } from "@types";
import { Typography } from "@mui/material";
import type { FieldProps } from "react-admin";
import { sanitizeFieldRestProps, useRecordContext } from "react-admin";

interface FileNumberFieldProps extends Omit<FieldProps, "source"> {}

const FileNumberField = (props: FileNumberFieldProps) => {
  const record = useRecordContext<ClientCompliance>();
  const { ...rest } = props;

  if (!record) {
    return <>></>;
  }

  return (
    <Typography
      component="span"
      variant="body2"
      {...sanitizeFieldRestProps(rest)}
    >
      {record.fileNumber ? formatFileNumber(record.fileNumber) : ""}
    </Typography>
  );
};

FileNumberField.displayName = "FileNumberField";
FileNumberField.defaultProps = { sortable: true, sortBy: "fileNumber" };

export default FileNumberField;

运行时收到警告：

未来大版本中将移除函数组件对defaultProps的支持，请改用JavaScript默认参数。

需要替换defaultProps，但不想在函数参数中解构props。

解决方案 #

直接在组件内部合并默认属性与传入的props，代码修改如下：

import { formatFileNumber } from "@components";
import type { ClientCompliance } from "@types";
import { Typography } from "@mui/material";
import type { FieldProps } from "react-admin";
import { sanitizeFieldRestProps, useRecordContext } from "react-admin";

interface FileNumberFieldProps extends Omit<FieldProps, "source"> {}

const FileNumberField = (props: FileNumberFieldProps) => {
  const record = useRecordContext<ClientCompliance>();
  // 合并默认值与传入的props，传入的属性会覆盖默认值
  const mergedProps = {
    sortable: true,
    sortBy: "fileNumber",
    ...props
  };

  if (!record) {
    return <>></>;
  }

  return (
    <Typography
      component="span"
      variant="body2"
      {...sanitizeFieldRestProps(mergedProps)}
    >
      {record.fileNumber ? formatFileNumber(record.fileNumber) : ""}
    </Typography>
  );
};

FileNumberField.displayName = "FileNumberField";

export default FileNumberField;

说明 #

• 通过创建mergedProps对象，先定义默认属性值，再展开传入的props，实现和defaultProps完全一致的优先级：传入的属性会覆盖默认值。
• 移除原有的FileNumberField.defaultProps声明，避免警告。
• 后续处理时使用mergedProps替代原props，确保默认值生效。

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