Question

我正在尝试构建一个可显示产品360度视图的React组件。我试图将this脚本转换为使用jQuery将可拖动的360度产品图像显示为React组件。

此脚本的工作方式是，首先以每个角度（最多360度）加载约20张产品图片。然后，使用jQuery，根据鼠标单击和移动事件自动切换图像。

作为React组件的一部分，我设法从文件夹中加载图像，并试图基于鼠标单击和移动事件来切换图像。另外，我发现this文章创建了图像的3D透视图，并具有一些用于React合成事件的有用功能。

如何使用React合成事件捕获鼠标单击和移动事件，以便切换到阵列中的下一个图像？

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


class App extends Component {


  render() {
    // var foo = new Array(36);
    var N = 37; 
    var imageCount = Array.apply(null, {length: N}).map(Number.call, Number)
    imageCount.shift()
    console.log(imageCount)
    let images = imageCount.map( (name, index) => {
            return <img key={index} className="img-responsive" alt="" src={require(`./360-demo/${name}.jpg`)} />
        } );

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>

        {images}
      </div>
    );
  }
}

export default App;

一旦我有了一个有效的组件，我计划将该代码开源，以便其他人也可以受益。

Answer 1

您可以跟踪从int开始的旋转，这意味着拖动必须在组件内进行。对于移动和旋转停止，可以使用onMouseDown和onMouseMove，但最好将其附加到文档上。通常，我不建议您在React中接触onMouseUp，但是在组件上使用事件处理程序时，它不会检测到组件外部的移动（就像您的jQuery一样）。

要点如下：

document

这是一个具有工作示例的沙盒：https://codesandbox.io/s/6v3491kxw3

在React中为360度图像构建一个简单的组件

1 个答案: