Использование 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>
    );
}