javascript - 在 React 的图像标签中渲染 css 类

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>
    );
  }
});

我在 style 标签中设置了 opacity 和 scale 属性，但我不知道如何添加旋转和平移，因为它们没有 html 标签。

所以我在 JXS 之外创建了一个变量， 变种图像旋转； 如果({旋转}===真){ className='旋转器'}

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

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

Answer 1

以 react 的方式，我会建议分离关注点:

• 在 css 中制作前后样式(不要在 React 中使用内联样式)，并将变换、旋转等放在后级中。
• 在您的 React 代码中，将点击处理程序添加到您的 <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 .