Использование CSS transform: translate (...) с ReactJS Согласно https://facebook.github.io/react/tips/inline-styles.html Стили CSS должны проходить как объект к компоненту. Однако, если вы пытаетесь использовать стили преобразования, вы получите сообщение об ошибке. Ответ 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} /> ) } Ответ 2 Translate также не работал у меня. Я исправил это, добавив 'px' за var. Код ES6: render() { const x = 100; const y = 100; const styles = { transform: `translate(${x}px, ${y}px)` }; return ( <div style={styles}></div> ); }
Ответ 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} /> ) }
Ответ 2 Translate также не работал у меня. Я исправил это, добавив 'px' за var. Код ES6: render() { const x = 100; const y = 100; const styles = { transform: `translate(${x}px, ${y}px)` }; return ( <div style={styles}></div> ); }