イメージタグの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> 
 
    ); 
 
    } 
 
});

私はスタイルタグに不透明度とスケールプロパティを設定し、それらのHTMLタグが存在しないので、私は、回転を追加して変換する方法を知りません。

私はJXS以外の変数を作成しました。 var imageRotate; （真{回転} ===）{ クラス名= '回転子'}

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

それが動作しない場合。私は画像タグにCSSを渡す最善の方法は何ですか？

Answer 1

翻訳と回転は、CSS transformプロパティの一部です。他のCSSとほとんど同じように、transformをスタイルに設定することができます。ベースをオフに動作するように例えば

は、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/

Answer 2

を反応させる方法で、私は別の懸念に助言する：

• はあなたを作ります前と後の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。