从加载器传递组件？

Question

我想在我的项目中使用 MDX，但是当我通过 API 获取数据（以 markdown 形式）时，我不能只导入它，我必须在我的应用程序中解析它。

为此，我创建了一个函数，根据他们的文档，它将采用原始 markdown 并使用

@mdx-js/mdx

进行编译：

      return {
        data: result,
        body: String(
              await compile(item, {
                outputFormat: "function-body",
              })
            ),
      };

然后，我想将其加载到我的

loader

函数中：

export async function loader({ params }: Route.LoaderArgs) {
  const post = await getBlogPost(params.slug);

  if (post?.body) {
    const content = await run(post.body, {
      ...runtime,
      baseUrl: import.meta.url,
    });

    return {
      ...post.data,
      body: post.body,
      Content: content.default,
    };
  }

  // eslint-disable-next-line @typescript-eslint/only-throw-error
  throw redirect("/404");
}

一切都很好，但是

Content

不起作用，它作为对象传递，而不是作为函数传递。我必须进行客户端解析，这在使用 SSR 框架时毫无意义：

export default function Entry({ loaderData }: Route.ComponentProps) {
  const [Cnt, setCnt] = useState<ComponentType>(Fragment);

  useEffect(() => {
    (async () => {
      try {
        const content = await run(loaderData.body, {
          ...runtime,
          baseUrl: import.meta.url,
        });

        setCnt(() => content.default);
      } catch (error) {
        console.error("Error loading content:", error);
      }
    })();
  }, [loaderData.body]);

  return <div>{<Cnt />}</div>;
}

有什么想法可以如何从加载器传递组件，或者以任何其他方式执行此操作？

Answer 1

不是您问题的答案，但您可以通过将其添加到您的 eslint 配置中来删除您的

// eslint-disable-next-line

评论之一：

      '@typescript-eslint/only-throw-error': [
        'error',
        {
          allow: ['Redirect'],
          allowThrowingAny: false,
          allowThrowingUnknown: false,
        },
      ],