Utiliser la transformation CSS: traduire (...) avec ReactJS

Question

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

Les styles CSS doivent être transmis en tant qu'objet au composant. Cependant, si vous essayez d'utiliser des styles de transformation, vous obtiendrez une erreur.

Answer 1

Traduire ne fonctionnait pas non plus pour moi. Je l'ai corrigé en ajoutant 'px' derrière le var.

Code ES6:

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

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

Answer 2

Ma solution a d'abord été de concaténer la chaîne, puis de la passer à l'objet. Notez l'utilisation de "px" ici.

render: function() {

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

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