CSSトランスフォームの使用：ReactJSでのtranslate（...）

Question

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

CSSスタイルは、オブジェクトとしてコンポーネントに渡す必要があります。ただし、変換スタイルを使用しようとすると、エラーが発生します。

Answer 1

翻訳もうまくいきませんでした。変数の後ろに「px」を追加して修正しました。

ES6コード：

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

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

Answer 2

私の解決策は、まず文字列を連結してからオブジェクトに渡すことでした。ここで「px」の使用に注意してください。

render: function() {

    var cleft = 100;
    var ctop = 100;
    var ctrans = 'translate('+cleft+'px, '+ctop+'px)';
    var css = {
        transform: ctrans 
    }

    return ( 
        <div style={css} />
    )
}