文章/答案/技术大牛

发布

社区首页 >问答首页 >反应-使用-手势不使用故事簿

问反应-使用-手势不使用故事簿
EN

Stack Overflow用户

提问于 2019-11-17 08:15:27

回答 1查看 1.5K关注 0票数 1

我有我的组件和故事书的文件，它呈现没有错误，但它是不可拖的。我把我的研究建立在这个例子的反应-使用手势Github。我注意到，如果我用启动一个新项目并将代码粘贴到那里，它就会工作得很好，但是使用故事书却不起作用。我还注意到，在我的代码中，元素看起来像<div style="x: 0px; y: 0px;"></div>，而不是<div style="transform: none;"></div> (来自工作示例的代码)，我一直在研究，无法找到解决方案，所以我来寻求这个非常棒的社区的帮助。

目标：使用react-spring和react-use-gesture在“反应故事书”上有一个拖放的卡片组件故事。

预期结果：能够拖动组件。

实际结果：组件不可拖动

错误消息：none。

组件的代码

import React from 'react'
import { useSpring, animated } from 'react-spring'
import { useDrag } from 'react-use-gesture'

export function Card() {
  const [props,
    set] = useSpring(() => ({ x: 0, y: 0, scale: 1 }))
  const bind = useDrag(({ down, movement: [x, y] }) => {
    set({ x: down ? x : 0, y: down ? y : 0, scale: down ? 1.2 : 1 })
  })
  return <animated.div {...bind()} style={props} />
}

export default Card;

故事代码：

import React from 'react'
import { storiesOf } from '@storybook/react'
import Card from './Card'

import './card.css'

const Body = ({ children }: any) => (
  <div className="wrapper">
    <style
      dangerouslySetInnerHTML={{ __html: `body { margin: 0; }` }}
    />
    {children}
  </div>
)

storiesOf('UI Components | Card', module)
  .add("Simple Card", () => (
    <Body>
      <Card />
    </Body>
  ))

如果只想检查代码，可以检查我的github回购，并运行包含上述^代码的npm install和npm run storybook 这是文件夹。

reactjs

storybook

react-spring

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-11-18 00:13:47

我找到了解决方案，codesandbox正在使用最新的useSpring测试版。我的版本是：

    "react-spring": "^8.0.27",
    "react-use-gesture": "^6.0.14",

以及解决方案

    "react-spring": "9.0.0-beta.34",
    "react-use-gesture": "latest"

也许这对其他人也有帮助。

票数 8

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58898689

复制

相似问题

问反应-使用-手势不使用故事簿
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应-使用-手势不使用故事簿EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应-使用-手势不使用故事簿
EN