Remix run：如何将父组件props传递给子组件的loader/action函数？

核心结论 #

在Remix中，无法直接将父组件的prop传入子组件的loader/action函数。原因很明确：loader/action是在服务器端提前执行的（远早于组件渲染阶段），而prop是组件渲染时才生成的客户端/渲染层数据，两者执行时机完全错开，没有直接传递的通道。

可行解决方案 #

下面是几种能让子组件loader/action获取父组件相关数据的常用方法：

1. 通过URL参数传递（最常用）

父组件可以把需要传递的数据放到动态路由参数或URL查询参数中，子组件的loader通过params或request.url提取这些参数。

父组件示例：

import { Link } from "@remix-run/react";

export default function Parent({ user }) {
  // 方式1：动态路由参数
  return <Link to={`/profile/${user.id}`}>查看用户详情</Link>;
  
  // 方式2：查询参数
  // return <Link to={`/profile?userId=${user.id}`}>查看用户详情</Link>;
}

子组件loader示例：

export async function loader({ params, request }) {
  // 从动态路由参数读取
  const userId = params.id;
  
  // 从查询参数读取（如果用方式2）
  // const url = new URL(request.url);
  // const userId = url.searchParams.get("userId");
  
  // 用参数获取数据
  const userProfile = await fetchUserProfile(userId);
  return { userProfile };
}

2. 通过Session/Cookie传递（适合敏感数据）

如果数据不需要暴露在URL中（比如用户隐私信息），可以在父组件的action中将数据存入Session或Cookie，子组件的loader从Session中读取。

父组件action示例：

import { redirect } from "@remix-run/node";
import { createSession, commitSession } from "~/services/session.server";

export async function action({ request }) {
  const formData = await request.formData();
  const selectedProject = formData.get("projectId");
  
  // 将数据存入session
  const session = await createSession(request.headers.get("Cookie"));
  session.set("selectedProject", selectedProject);
  
  // 重定向到子组件页面
  return redirect("/project-details", {
    headers: {
      "Set-Cookie": await commitSession(session),
    },
  });
}

子组件loader示例：

import { getSession } from "~/services/session.server";

export async function loader({ request }) {
  const session = await getSession(request.headers.get("Cookie"));
  const selectedProject = session.get("selectedProject");
  
  if (!selectedProject) {
    return redirect("/projects");
  }
  
  const projectDetails = await fetchProjectDetails(selectedProject);
  return { projectDetails };
}

3. 共享服务器端数据查询逻辑

如果父组件的数据本来就是从服务器端获取的（比如父组件loader查询到的数据），子组件loader可以直接调用相同的服务器端函数或执行相同的数据库查询，无需从父组件传递。

共享数据函数（~/services/projects.server.js）：

export async function getProjectById(projectId) {
  return await db.project.findUnique({ where: { id: projectId } });
}

父组件loader：

import { getProjectById } from "~/services/projects.server";

export async function loader({ params }) {
  const project = await getProjectById(params.projectId);
  return { project };
}

子组件loader：

import { getProjectById } from "~/services/projects.server";

export async function loader({ params }) {
  // 子路由假设为 /projects/:projectId/tasks，直接从路由参数拿projectId
  const project = await getProjectById(params.projectId);
  return { project };
}

4. 客户端Context传递（仅限客户端渲染逻辑）

注意：这种方法仅适用于客户端执行的代码，子组件的loader/action无法访问React Context。如果子组件的客户端逻辑需要父组件的prop，可以用React Context传递：

// 父组件中创建Context
import { createContext, useContext } from "react";

const ParentDataContext = createContext(null);

export function Parent({ data }) {
  return (
    <ParentDataContext.Provider value={data}>
      <Child />
    </ParentDataContext.Provider>
  );
}

// 子组件中使用Context
export function Child() {
  const parentData = useContext(ParentDataContext);
  // 在客户端渲染中使用parentData
  return <div>{parentData.name}</div>;
}

总结 #

子组件的loader/action只能通过服务器端可访问的渠道获取数据，比如URL参数、Session、共享的服务器端查询逻辑。如果是客户端渲染逻辑，可以用React Context传递父组件prop。

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