Polaris 组件的坑

2021-02-22

今天在公司也是修修小 Issues 改改文案。就是有个需求是要修改左上角 Logo 的链接,UI 框架用的是 Shopify 的 Polaris,这个框架内置了很多组件,但其项目历史可能早于 Antd。

要修改 Logo 的链接,需要修改框架一个名为“主题”的参数,我将其修改为一个静态值是确实有效果的,但是一旦改成异步获取到的 Mobx 数据,这里最终点击会变成 "" 空值。

const theme: AppProviderProps['theme'] = {
  colors: {
    topBar: {
      background: "#fff",
    },
  },
  logo: {
    topBarSource: '/images/logo-white.svg',
    accessibilityLabel: 'Presto',
    url: WP_HOST + "/wn/dashboard"
  },
};

这就很郁闷了,难道是组件里面限制了生命周期,不允许重新修改 props 里面的数据,从而进行刷新和重绘么?Mobx 的数据存在的时候页面可以热更新,热更新之后的结果其实也是正确的,只是刷新之后就不行了。针对这种情况,老大最终决定暂时就用环境变量指向另外一个相对固定的地址了,这些组件以后大概率全部替换成 Antd 组件了。

配乐 多云 开心
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君