Utilizzando i CSS trasformare: tradurre (...) con ReactJS

Question

Secondo https://facebook.github.io/react/tips/inline-styles.html

stili CSS bisogno di essere passa come un oggetto al componente. Tuttavia, se stai cercando di utilizzare gli stili di trasformazione, otterrai un errore.

Answer 1

La mia soluzione era quella di prima concatenare la stringa e quindi passarla all'oggetto. Notare l'uso di 'px' qui.

render: function() { 

    var cleft = 100; 
    var ctop = 100; 
    var ctrans = 'translate('+cleft+'px, '+ctop+'px)'; 
    var css = { 
     transform: ctrans 
    } 

    return ( 
     <div style={css} /> 
    ) 
} 

Answer 2

Traduci anche che non funzionava per me. L'ho risolto aggiungendo "px" dietro la var.

ES6 codice:

render() { 
    const x = 100; 
    const y = 100; 
    const styles = { 
     transform: `translate(${x}px, ${y}px)` 
    }; 

    return (
     <div style={styles}></div> 
    ); 
}