在使用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
配置文件导出依赖给调试现场的方法,重点在于:
- 有一个
__repl__/xxx.play.tsx
作为skr play
的配置文件,与组件一一对应。 - 使用
export const provides
对象提供依赖。 - 在调试现场使用
I.xxx
使用依赖。
除了路由,你也可以用相同的方法解决如Context
等问题。