我正在用 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 传递到图像标签的最佳方式是什么?
最佳答案
以 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>
元素,但原理是一样的。
关于javascript - 在 React 的图像标签中渲染 css 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37124335/