使用CSS转换:使用ReactJS翻译(...)

Question

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

CSS样式需要作为对象传递给组件.但是,如果您尝试使用转换样式,则会出现错误.

Answer 1

翻译也不适合我.我通过在var后添加'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} />
    )
}