ssr后className使用三目运算后会报错

[wuyiifan]

提问前请确认以下几点信息，否则你的问题将不会被解答

• 参考 https://zhuanlan.zhihu.com/p/25795393 学会正确的提问方式
• 确定已经阅读过文档 http://doc.ssr-fc.com/ 并且文档中搜索不到相关答案
• 对应服务端框架的使用问题请去它们的官方文档找答案。例如 Midway, Nest.js
• 如果你确认当前是一个 bug 请给最简复现仓库。只有一张图或者信息不足的问题将会被直接关闭
• 原则上这里只解答与本框架有关的问题。关于其他问题例如 Node.js 怎么连 Mysql 怎么获取 cookie 这种基础问题你应该去 google找答案而不是在这里。

详细描述你的问题

const path = __isBrowser__ ? props.match.path : ''

 <div className="main-menu">
  {
    menuList.main.map(item => (
      // <Link to={item.link} className={`${styles['nav-item']} ${styles.active}`} key={item.text}>
      <Link to={item.link} className={path === item.link ? `${styles['nav-item']} ${styles.active}` : styles['nav-item']} key={item.text}>
        <MyIcon className={styles.icon} size="md" name={item.icon}></MyIcon>
        <span className={styles.text}>{item.text}</span>
      </Link>
    ))
  }
</div>

如果不使用三目运算直接<Link to={item.link} className={${styles['nav-item']} ${styles.active}} key={item.text}>,是正常的。

期望的结果

在className上能够使用三木运算的方式，

当前使用的版本

复现仓库地址

你本人对问题可能的原因判断(如果你能大概判断的话)

看next.js的解决方案是这样的https://binyamin.medium.com/solving-the-styled-components-warning-in-next-js-with-babel-83080e45a0ff

在本框架使用后没有生效，期待恢复。

[zhangyuang]

// fetch.ts

export default (props) => {
return {
path:  __isBrowser__ ? props.match.path : props.request.path
}
// render.tsx

  const { state, dispatch } = useContext<IContext<any>>(window.STORE_CONTEXT)
const path = state.path

}

[zhangyuang]

你发的这个链接讲的是框架在同一场景统一逻辑业务代码下的server/client hash生成规则不一样

你这个错误跟hash规则一点关系都没有，你的业务代码在server/client的逻辑都不一致

[zhangyuang]

and 你可以把你的代码放在 useEffect 里面去更新 state

[wuyiifan]

感谢