React-use-gesture 不适用于 Storybook

Question

React-use-gesture 不适用于 Storybook

Wag*_*ira 1 reactjs storybook react-spring

我有我的组件和故事书故事文件，它没有错误地呈现，但它不能拖动。我将我的研究基于react-use-gesture Github 中的这个示例。我注意到，如果我使用 create-react-app 启动一个新项目并将此代码粘贴到那里，它可以正常工作，但是使用 storybook 就行不通了。我还注意到，在我的代码中，元素看起来像而不是（来自有效示例的代码），我一直在研究，但找不到解决方案，所以我来寻求这个很棒的社区的帮助。<div style="x: 0px; y: 0px;"></div><div style="transform: none;"></div>

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

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

实际结果：组件不可拖动

错误消息：无。

组件的代码：

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;

Run Code Online (Sandbox Code Playgroud)

故事代码：

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

Run Code Online (Sandbox Code Playgroud)

您可以为此检查我的github 存储库并运行npm install，如果您只想检查代码，npm run storybook 这里是包含上述代码的文件夹^。

Answer 1

Wag*_*ira 8

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

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

Run Code Online (Sandbox Code Playgroud)

和解决方案

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	6 年前
查看次数：	1207 次
最近记录：	6 年前