Question

我正在使用React制作应用程序，我希望在点击按钮后旋转并翻译图像。

render: function() {
    var imageSrc = this.props.imageSrc;
    var rotate = this.props.rotate;
    var translate = this.props.translate;
    var opacity = this.props.opacity;
    var scale = this.props.scale;
 
    return (
      <div>
        <img src={imageSrc} tyle={{opacity: opacity? 0.5:1,height: scale? 600:300, width: scale? 800:400}}/>
        <div>
          <input type="file" onChange={this.handleChangeFile} />
        </div>
      </div>
    );
  }
});

我在样式标记中设置了opacity和scale属性，但我不知道如何添加rotate和translate，因为它们没有html标记。

所以我在JXS之外做了一个变量， var imageRotate; 如果（{}旋转如此===）{ 的className = '旋转器'}

  return (
    <div>
     <img src={imageSrc} style={{className={imageRotate}/>
    <div>

但它不起作用。我想知道将css传递到图像标签的最佳方法是什么？

Answer 1

以反应的方式，我建议分开关注：

在css中设置样式之前和之后（并不在反应中使用内联样式），并在后面的类中放置变换，旋转等。
在您的反应代码中，向您的<img>添加点击处理程序，将新类应用于您的<img>组件

示例代码（每次单击时更改类）将如下所示：

class Application extends React.Component {
  constructor(props) {
    super(props);
    this.state={ className: 'class1' }
  }
  handleClick() {
    this.setState({
      className: (this.state.className=='class1')? 'class2' : 'class1'
    })
  }
  render() {
    return <div>
      <p className={this.state.className} 
         onClick={() => this.handleClick()}>
           click me to change color
      </p>
    </div>;
  }
}

在此示例中，class1或class2应用于<p>元素，但原则相同。

Working codepen here

Answer 2

翻译和旋转是CSS transform属性的一部分。您可以在样式中设置transform，就像任何其他CSS一样。

例如，要解决基础React JSfiddle：

var Hello = React.createClass({
  render: function() {
    return <div style={{transform:"translate(10px, 10px) rotate(-15deg)"}}>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

参见jsfiddle：https://jsfiddle.net/a02jkshm/

在图像标签中渲染css类进行反应

2 个答案: