Korzystanie CSS transform: translate (...) z ReactJS

Question

Według https://facebook.github.io/react/tips/inline-styles.html

stylów CSS muszą być przechodzi jako przedmiot składnika. Jednakże, jeśli próbujesz użyć stylów przekształcania, pojawi się błąd.

Answer 1

Moim rozwiązaniem było najpierw połączyć ciąg, a następnie przekazać go do obiektu. Zwróć uwagę na użycie "px" tutaj.

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

Tłumaczenie również nie działało dla mnie. Naprawiłem to, dodając "px" za var.

ES6 Kod:

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

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