点击页面书签内的锚点替换Storybook框架

woobm2wo  于 3个月前  发布在  其他
关注(0)|答案(7)|浏览(46)

描述bug

如果我有一个组件,其中包含一个锚点,包含书签/片段/哈希URL/href,例如:

const App = (props) => {
  return (
    <div>
      <a href="#some-content">Bookmark link to some content</a>
      <p id="some-content">
        Some content
      </p>
    </div>
  );
};

在Storybook中点击锚点应该滚动链接内容以查看,但实际上会替换主Storybook框架。
Screen.Recording.2021-08-27.at.17.56.40.mov

系统

Storybook 6.3.7,在5.3.21中也可重现

重现方法

https://github.com/penx/storybook-bookmarks

iugsix8n

iugsix8n1#

看起来你正在深入研究另一个问题,对吗?如果是相同的,你能请复制或者作为重复项吗?看起来这里有一个复现的地方☝️

wribegjk

wribegjk2#

这也发生在当前的故事书版本(6.4.18)中。基本上不能在故事书组件中使用锚链接,除非你已经在iframe框架中。

yqkkidmi

yqkkidmi3#

我认为他们之间没有直接关系。

dw1jzc5e

dw1jzc5e4#

我也遇到过这个问题。

fkvaft9z

fkvaft9z5#

在数学问题中,我们需要解出以下方程:

$x+y=10\x-y=2$

得:x=6

y=4

所以,$x=6$,$y=4$。

balp4ylt

balp4ylt6#

我也遇到了这个问题,并确认@hrypkema-amplify的解决方案非常有效。谢谢!

zzoitvuj

zzoitvuj7#

在Storybook或测试库中是否有关于解决此问题的更新?@hrypkema-amplify的解决方案是让Storybook正常工作的方法,但在我的情况下,它并不能准确地表示组件的实现或使用情况。
例如,我想在锚点上测试不同的目标(即_blank),所以如果能在测试框架中拦截点击并验证预期行为,那就太好了。

相关问题