Mit CSS-Transformation: translate (...) mit ReactJS

Question

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

CSS-Stile benötigen Pässe als Objekt der Komponente sein. Wenn Sie jedoch versuchen, Transformationsstile zu verwenden, erhalten Sie einen Fehler.

Answer 1

Meine Lösung bestand darin, zuerst die Zeichenfolge zu verketten und dann an das Objekt zu übergeben. Beachten Sie die Verwendung von 'px' hier.

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

Übersetzen auch funktionierte nicht für mich. Ich habe es behoben, indem ich 'px' hinter die Variable gesetzt habe.

ES6 Code:

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

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