Provider Stories

设计使用了 Context 的 React 组件时，应当使用数据、表现分离的方式。

MyComponent/index.tsx

<MyContext.Provider value={default}>
  <Layout />
</MyContext.Provider>

MyComponent/Layout.tsx

const myContext = useContext(MyContext)

return <div />

这样给 StroyBook 提供了 Mock Context 数据的切面。

MyComponent/Layout.stories.tsx

export Default = () => (
  <MyContext.Provider value={default}>
    <Layout />
  </MyContext.Provider>
)

export Case = () => (
  <MyContext.Provider value={case}>
    <Layout />
  </MyContext.Provider>
)