Skip to main content

用skr play调试需要路由的组件

· 4 min read
otakustay

在使用reSKRipt的时候，我们非常推荐使用skr play命令来调试单个组件，它会为你提供一个可实时编程的界面，实时看到对应组件的可交互界面。

但并不是每一个组件都纯粹到可以没有外部依赖就跑起来的，其中很典型的一种情况就是组件依赖了路由，例如我们需要用useParams()来获取URL中的参数，或使用useLocation()拿到具体的路径信息。由于skr play默认的调试环节是不具备路由等环境的，因此需要我们做一些额外的配置工作。

目录结构​

我们假定正在开发一个Foo组件，它需要使用react-router-dom才能正常展示，那么可以有下面这样的目录结构：

/src
    /components
        /Foo
            /__repl__
                index.play.tsx
            index.tsx

其中src/components/Foo/index.tsx为组件的实现代码。我们可以看到这个结构中多了一个src/components/Foo/__repl__/index.play.tsx文件，这个被称为skr play的配置文件。这个文件的名字与组件文件名同名，如果你的组件文件名是Bar.tsx，那么它就是__repl__/Bar.play.tsx。

注入外部依赖​

在__repl__/index.play.tsx中，我们可以编写以下内容：

import {MemoryRouter} from 'react-router-dom';

export const provides = {
    MemoryRouter,
};

可以看到，我们引用了react-router-dom中的MemoryRouter，并通过export const provides对象把它导了出去。

在配置文件中，export const provides导出可以将你需要的内容“带给”skr play的调试现场。

使用依赖​

当你使用skr play src/components/Foo/index.tsx打开调试现场时，你看到的代码中依然没有MemoryRouter，此时你还是不能正确地看到组件的长相。你需要将左侧编辑器中的代码调整为这样：

function Repl() {
    return (
        <I.MemoryRouter initialEntries={['/foo/bar/123']}>
            <Foo />
        </I.MemoryRouter>
    );
}

简单来说，所有你在配置文件的provides对象里提供的东西，都可以在界面中用I.xxx拿来用。

当然，为了调试方便，也可以把Link也提供出去，在调试界面里加几个链接来快速跳到某些URL下看效果。

总结​

我们介绍了通过__repl__/xxx.play.tsx配置文件导出依赖给调试现场的方法，重点在于：

  1. 有一个__repl__/xxx.play.tsx作为skr play的配置文件，与组件一一对应。
  2. 使用export const provides对象提供依赖。
  3. 在调试现场使用I.xxx使用依赖。

除了路由，你也可以用相同的方法解决如Context等问题。