Utilisation de la transformation CSS: translate (...) avec ReactJS

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

Styles CSS doivent être passe comme un objet pour le composant. Toutefois, si vous essayez d'utiliser transformer les styles, vous obtiendrez une erreur.

source d'informationauteur Guy Laor

  1. 10

    Traduire aussi ne fonctionnait pas pour moi. J'ai corrigé par l'ajout de " px " derrière le var.

    ES6 code:

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

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

    Ma solution était d'abord de concaténer la chaîne, puis passez à 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} />
    )
}