我有我的组件和故事书故事文件，它没有错误地呈现，但它不可拖动。我的研究基于react-use-gesture Github中的这个示例。我注意到，如果我使用 create-react-app 开始一个新项目并将此代码粘贴到那里，它可以正常工作，但是使用故事书它就不起作用。我还注意到，在我的代码中，元素看起来而不是（来自有效示例的代码），我一直在研究，但找不到解决方案，所以我来寻求这个很棒的社区的帮助。<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;
故事代码：
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
这里是包含上述代码的文件夹^。