在 Remix React 中获取 Props 的类型

Question

我需要将

project

传递给

<ProjectForm />

。我不希望它是

any

类型，我怎样才能为

project

放置一个类型呢？正确的

type

是什么？

项目详细信息.tsx

export default function ProjectDetails() {
    const submit = useSubmit();

    const project = useLoaderData<typeof loader>();

    const onSubmit = (data: FormData) => {
        submit({ ...data }, { method: "post" });
    };

    return (
        <>
            <h1>Project Details</h1>
            <div>
                <ProjectForm project={project} onSubmit={onSubmit} />
            </div>
        </>
    );
}

ProjectForm.tsx

interface ProjectFormProps {
    project?: any;
    onSubmit: (data: any) => any;
}

const ProjectForm = ({ project, onSubmit }: ProjectFormProps) => {
    return ...
}

Answer 1

onSubmit

似乎属于

(data: FormData) => void;

类型。很难说

project

是什么，因为我们看不到加载器返回的内容，但是

useLoaderData

钩子的返回类型是

unknown

,

/**
 * Returns the loader data for the nearest ancestor Route loader
 */
export function useLoaderData(): unknown {
  let state = useDataRouterState(DataRouterStateHook.UseLoaderData);
  let routeId = useCurrentRouteId(DataRouterStateHook.UseLoaderData);

  if (state.errors && state.errors[routeId] != null) {
    console.error(
      `You cannot \`useLoaderData\` in an errorElement (routeId: ${routeId})`
    );
    return undefined;
  }
  return state.loaderData[routeId];
}

所以我会这样做，除非你需要在传递它之前将其转换为更具体的东西。

interface ProjectFormProps {
  project?: unknown;
  onSubmit: (data: FormData) => void;
}

const ProjectForm = ({ project, onSubmit }: ProjectFormProps) => {
  return ...
}

如果您需要显式输入

project

属性：

示例

interface ProjectType {
  // defined the properties
}

interface ProjectFormProps {
  project?: ProjectType;
  onSubmit: (data: FormData) => void;
}

const ProjectForm = ({ project, onSubmit }: ProjectFormProps) => {
  return ...
}

export default function ProjectDetails() {
  const submit = useSubmit();

  const project = useLoaderData();

  const onSubmit = (data: FormData) => {
    submit({ ...data }, { method: "post" });
  };

  return (
    <>
      <h1>Project Details</h1>
      <div>
        <ProjectForm project={project as ProjectType} onSubmit={onSubmit} />
      </div>
    </>
  );
}