Question

我正在用reactjs制作图像查看器。实际上，我希望当用户单击旋转图标时，图像旋转约90度。一切正常，但是主要问题是，当我单击任何图像并旋转并关闭它之后，如果我打开其他图像，它将采用先前的旋转值，但是在初始化时必须为零。

class GalleryModal extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            rotation: 0
          };
          this.rotate = this.rotate.bind(this);
          this.fullScreen = this.fullScreen.bind(this);
        }

        render() {
          const { rotation } = this.state;
          if (this.props.isOpen === false) {
            return null;
          }

          return (
            <div className="modal-overlay" name={this.props.name}>
              <div className="modal-body" id="image_container">

                <img
                  className="center_image"
                  id="image"
                  src={this.props.src}
                  style={{ transform: `rotate(${rotation}deg)` }}
                />
                <a href="#" className="fullscreen button" onClick={this.fullScreen}>
                    <i className="fas fa-compress-arrows-alt"></i>
                </a>
                <a href="#" className="button" onClick={() => this.rotate()}>
                  <i className="fas fa-sync-alt" />
                </a>
                <a href="#" className="button" onClick={this.props.onPrev}>
                  <i className="fas fa-angle-left" />
                </a>
                <a href="#" className="button" onClick={this.props.onNext}>
                  <i className="fas fa-angle-right" />
                </a>
                <a
                  className="modal-close"
                  href="#"
                  onClick={this.props.onClick}
                >
                  <span className="fa fa-times" />
                </a>

              </div>
            </div>
          );
        }
        rotate() {
          let newRotation = this.state.rotation + 90;
          if (newRotation >= 360) {
            newRotation = -360;
          }
          this.setState({
            rotation: newRotation
          });
        }

        fullScreen() {
          let elem = document.getElementById("image_container");
          if (elem.requestFullscreen) {
            elem.requestFullscreen();
          } else if (elem.mozRequestFullScreen) {
            /* Firefox */
            elem.mozRequestFullScreen();
          } else if (elem.webkitRequestFullscreen) {
            /* Chrome, Safari & Opera */
            elem.webkitRequestFullscreen();
          } else if (elem.msRequestFullscreen) {
            /* IE/Edge */
            elem.msRequestFullscreen();
          }
        }
      }

Demo here这是我想要的，但是当我单击其他图像或下一个/上一个图标时，它采用的是上一个值，但是rotation必须为零，因为我声明了rotation:0。我不知道旋转错误从何处得到解决，因为我认为它已纠正。您能告诉我我做错了什么以及如何解决吗？

Answer 1

问题在于，当您将状态设置为Declare @WordTable table (Id int primary key, Word varchar(25)) Insert @WordTable values (1, 'word1') Insert @WordTable values (2, 'word2') Insert @WordTable values (3, 'word3') DECLARE @Words VARCHAR(MAX) SELECT @Words = STUFF (( SELECT '"' + Word + '" OR ' FROM @WordTable FOR XML PATH('') ), 1, 0, '') --drop the last OR SELECT @Words = SUBSTRING(@Words, 0, LEN(@Words) - 2) DECLARE @Query VARCHAR(MAX) SELECT @Query = 'SELECT DocumentNode, DocumentSummary FROM Production.Document WHERE CONTAINS(DocumentSummary, ''' + @Words +''')' EXEC(@Query)时，您正在修改Log.d()组件的状态；因此，当您打开模型时，rotation: 0组件将其自己的Gallery变量设置为Gallery。

相反，用于显示图像的旋转是this.state.rotation组件中的旋转，永远不会再次设置为0。

一种解决方案可能是将GalleryModal变量从0组件传递到this.state.rotation组件。

您的小提琴已修正：https://jsfiddle.net/3hywna07/

此外，在第61行，而不是编写：

Gallery

只需写：

GalleryModal

应避免在<a href="#" className="button" onClick={() => this.props.rotate()}>方法内部使用箭头函数，因为每次执行<a href="#" className="button" onClick={this.props.rotate}>方法时，都会导致函数的创建。

更新链接：-https://jsfiddle.net/c0qpk5wv/2/

Answer 2

Matteo正确了。您也可以让模态本身保持旋转并创建一个关闭函数，该函数将在调用提供的关闭函数之前将旋转设置为0。画廊不应该对旋转感兴趣，因为保持图像之间的旋转几乎没有价值。

变量未使用Reactjs中的变量的初始值

2 个答案: