Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

我想给它支持ssr的组件,是否可行。 #50

Closed
LonelyFellas opened this issue Mar 22, 2024 · 15 comments
Closed

我想给它支持ssr的组件,是否可行。 #50

LonelyFellas opened this issue Mar 22, 2024 · 15 comments

Comments

@LonelyFellas
Copy link

No description provided.

@LonelyFellas
Copy link
Author

我觉得还是最初switch组件的版本代码比较更好一点,之前并且应该是支持ssr吧

@jaywcjlove
Copy link
Member

@LonelyFellas 刚为你测试了一下 Only 是支持 ssr, Switchv2支持了,v1 支持 ssr

@jaywcjlove
Copy link
Member

@LonelyFellas 老的代码没有问题,但是有个问题 #45 ,里面使用了即将过时 API

image

所以使用 Context 来解决这个问题,同时解决了,可以跨组件使用 Switchv1 对子组件进行循环,进行判断,所以下面方式在 v2 中不出问题,在 v1 中 Case 就失效了

<Switch>
    <div>
      <Case as="span" condition={age < 6}>Preschool</Case>
    </div>
</Switch>

@jaywcjlove
Copy link
Member

@LonelyFellas 所以有没有解决 ssr 的方法呢?

createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.

@LonelyFellas
Copy link
Author

LonelyFellas commented Mar 22, 2024

image

我的做法其实很粗糙。。。我简单的实现了你的md文档例子的功能,并且支持ssr

@LonelyFellas
Copy link
Author

@jaywcjlove 你有觉得逻辑哪里不妥吗

@jaywcjlove
Copy link
Member

@LonelyFellas 你这个差不多是我 v1 版本的逻辑循环子节点,去处理

v2 版本的逻辑是,加载 CaseDefault 的时候收集数据,存储到全局 context 里面,在渲染的时候,拿到数据进行判断

@jaywcjlove
Copy link
Member

@LonelyFellas 代码逻辑更清晰简单,我发现我本地还有没有提交的代码 😄

jaywcjlove added a commit that referenced this issue Mar 22, 2024
jaywcjlove added a commit that referenced this issue Mar 22, 2024
@LonelyFellas
Copy link
Author

主要是你的v2的版本用不单单是用了createContext,还用了useState,useEffect,这些钩子在有状态的变化,不支持ssr

@jaywcjlove
Copy link
Member

@LonelyFellas 移除冗余代码之后,简单多了。现在可能不支持ssr 需要在文件上添加 "use client"

没有用到 useState 主要是 createContext

@LonelyFellas
Copy link
Author

@LonelyFellas 移除冗余代码之后,简单多了。现在可能不支持ssr 需要在文件上添加 "use client"

没有用到 useState 主要是 createContext

我看了有用到useReducer的, 差不多的意思跟useState。

jaywcjlove added a commit that referenced this issue Mar 22, 2024
@jaywcjlove
Copy link
Member

@LonelyFellas 根据你给的示例,我看了 v1 的代码,进行了重构,升级 v3.0.0

@LonelyFellas
Copy link
Author

LonelyFellas commented Mar 23, 2024

@jaywcjlove 可以。能够达到预期

@LonelyFellas
Copy link
Author

@jaywcjlove 在Default这组件。我认为把prop属性的condition去除掉,不然我认为Default和Case没啥区别呀

jaywcjlove added a commit that referenced this issue Mar 23, 2024
jaywcjlove added a commit that referenced this issue Mar 23, 2024
@jaywcjlove
Copy link
Member

@LonelyFellas Upgrade v3.0.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants