React-admin 使用打字稿编辑标题缺失记录

Question

为了使用 react-admin 下的 Typescript 功能，我按照 this official example 输入编辑标题：

interface UserTitleProps {
  record: UserRecord;
}
const UserTitle: FC<UserTitleProps> = ({ record }) => {
  const identifier = record?.email || record?.phoneNumber;

  if (record?.name) {
    return `${record?.name} (${identifier})`;
  }

  return identifier;
};
export const UserEdit: FC<EditProps> = (props) => (
  <Edit
    title={<UserTitle />}
    {...props}
  >
    <UserForm />
  </Edit>
);

但是上面的代码给了我以下打字稿错误：

Property 'record' is missing in type '{}' but required in type 'UserTitleProps'.  TS2741

    103 | export const UserEdit: FC<EditProps> = (props) => (
    104 |   <Edit
  > 105 |     title={<UserTitle />}
        |             ^
    106 |     {...props}
    107 |   >
    108 |     <UserForm />

的确，record props 并没有真正通过，但是根据 documentation 和下面的示例，没有什么可以添加的。

我是不是漏掉了什么？

谢谢

Answer 1

如果你仔细检查过这个：

interface UserTitleProps {
  record?: UserRecord; // make this an optional property
}

您会注意到 record 是可选的属性但在您的代码中它是强制性的。
因此对于您的情况，您需要传递 record prop.

但如果您更新该行，使 prop 可选，那么 TypeScript 应该停止抱怨，除非另有原因。

来自他们的page-title documentation

React-admin says that when you pass an element as title, it's cloned.
And from within <EditView>, the current record is injected to the title.

因此，您永远不必显式传递 record 属性。
因此 record 在添加到界面时应该始终是一个“可选”道具，因为您不必直接传递它。

In this video，如果你对细节感兴趣，你可以看看下面发生了什么。

export const UserEdit: FC<EditProps> = (props) => {

  return (
    <Edit
      title={<UserTitle />} // "record" prop is never passed explicitly
      {...props}
    >
      <UserForm />
    </Edit>
  );
};

Answer 2

这段代码帮我解决了这个问题。我的代码示例有效：

const EditTitle = ( record : any ) => {
  return <span>Change feed state of {record.record ? `${record.record.feed}` : ''}</span>;
};

调试打印后，我发现record其实是一个对象，里面包含了record 属性和我需要的字段。我也用TS

React-admin 使用打字稿编辑标题缺失记录

React-admin Edit title missing record with typescript

typescript

reactjs

react-admin