javascript - 在 React 中旋转图像

Question

我需要在 React 中将图像旋转 90 度。这是我的代码：

rotatePic(id) {
  var newRotation = this.state.rotation + 90;
  if(newRotation >= 360){
    newRotation =- 360;
  }
  this.setState({
    rotation: newRotation,
  });
}

render() {
  const { rotation } =  this.state;
  const rot = {
    transform: `rotate(${rotation}deg)`
  };
  return (
    <div className="gallery-root">
      {this.state.images.map(dto => {
        return <Image 
                 key={'image-' + dto.id} 
                 dto={dto} 
                 galleryWidth={this.state.galleryWidth} 
                 style={{rot}} 
                 width={this.state.width} 
                 height={this.state.height} 
                 imagesArr={this.removePic} 
                 imagesArr2={this.rotatePic}
               />;
      })}
  );
}

这行不通。有人知道我错过了什么吗？

谢谢

标签： javascriptreactjsrotation

Answer 1

更改style={{rot}}为style={rot}。

该style道具需要一个样式对象，您的代码将样式对象嵌套在另一个对象中。

此外，您的代码缺少结束标记<div className="gallery-root">