Fresh.js中props.data被弃用后的替代方案是什么？

Fresh 目前已弃用 props.data，推荐通过组件state来传递服务端获取的数据，以下是具体实现方式：

1. 动态路由页面的服务端数据传递 #

在路由的handler函数中，将原本存入data的数据改为存入state字段，再在页面组件中从props.state读取数据：

// routes/[slug].tsx
import { Handlers, PageProps } from "$fresh/server.ts";

export const handler: Handlers = {
  async GET(_req, ctx) {
    // 读取目标文本文件内容
    const textContent = await Deno.readTextFile(`./content/${ctx.params.slug}.txt`);
    // 将数据存入state而非原data字段
    return ctx.render({ state: { textContent } });
  },
};

export default function DynamicPage(props: PageProps) {
  // 从props.state中提取数据
  const { textContent } = props.state;
  return <div className="text-container">{textContent}</div>;
}

2. 组件间的普通传参 #

如果是组件之间传递数据（非服务端获取场景），直接通过组件props传递即可，无需依赖state或废弃的data：

// components/TextDisplay.tsx
// 定义接收props的类型
type TextDisplayProps = {
  content: string;
};

export default function TextDisplay({ content }: TextDisplayProps) {
  return <div className="prose">{content}</div>;
}

// 在路由组件中调用该组件
export default function DynamicPage(props: PageProps) {
  const { textContent } = props.state;
  return <TextDisplay content={textContent} />;
}

注意事项 #

• 当前props.data仍能正常工作是因为Fresh保留了兼容逻辑，但后续版本大概率会移除该属性，建议尽快完成迁移。
• 使用state的方式更贴合Fresh后续的设计逻辑，数据流向也更清晰。

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