Использование CSS преобразования: перевод (...) с ReactJS

Question

Согласно https://facebook.github.io/react/tips/inline-styles.html

стилей CSS должны быть проходы в качестве объекта компонента. Однако, если вы пытаетесь использовать стили преобразования, вы получите сообщение об ошибке.

Answer 1

Моим решением было сначала соединить строку, а затем передать ее объекту. Обратите внимание на использование здесь «px».

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

Перевод также не работал для меня. Я исправил это, добавив 'px' за var.

ES6 код:

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

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