React-use-gesture 不适用于 Storybook

Question

I have my component and the storybook stories file, it renders with no errors but it is not draggable.我有我的组件和故事书故事文件，它没有错误地呈现，但它不可拖动。 I am basing my studies into this example from the react-use-gesture Github .我的研究基于 react-use-gesture Github 这个例子。 I noticed that if I start a new project with create-react-app and paste this code there it works fine, but using storybook it doesn't work.我注意到，如果我使用 create-react-app 开始一个新项目并将此代码粘贴到那里，它可以正常工作，但是使用故事书它就不起作用。 I also notice that in my code the element looks like <div style="x: 0px; y: 0px;"></div> instead of <div style="transform: none;"></div> (code from the example that works), I've been researching and I couldn't find a solution so I came to ask the help of this awesome community.我还注意到，在我的代码中，元素看起来像<div style="x: 0px; y: 0px;"></div>而不是<div style="transform: none;"></div> （代码来自有效的示例），我一直在研究，但找不到解决方案，所以我来寻求这个很棒的社区的帮助。

Goal : To have a draggable card component story on react storybook, using react-spring and react-use-gesture .目标：使用react-spring和react-use-gesture在 React Storybook 上有一个可拖动的卡片组件故事。

Expected results : To be able to drag the component around.预期结果：能够拖动组件。

Actual results : Component is not draggable实际结果：组件不可拖动

Error Messages : none.错误信息：无。

Component's code :组件代码：

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;

Stories code:故事代码：

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>
  ))

You can check my github repo for this and run npm install and npm run storybook Here is the folder that contains the code above ^ if you want to check the code only.您可以查看我的github 存储库并运行npm install和npm run storybook如果您只想检查代码，这里是包含上述代码的文件夹^。

Answer 1

I found the solution, the codesandbox is using the latest beta of useSpring .我找到了解决方案， codesandbox使用的是useSpring的最新测试版。 The versions I had were:我的版本是：

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

and the solution和解决方案

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

Maybe this will be of help for someone else as well.也许这对其他人也有帮助。

React-use-gesture 不适用于 Storybook

问题描述

1 个解决方案

解决方案1
8 已采纳 2019-11-18 00:13:47

React-use-gesture 不适用于 Storybook

问题描述

1 个解决方案

解决方案1 8 已采纳 2019-11-18 00:13:47

解决方案1
8 已采纳 2019-11-18 00:13:47