Skip to main content

One post tagged with "play"

View All Tags

· 4 min read

在使用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等问题。