Question

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

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

Answer 1

翻译也不适合我。我通过添加＆＃39; px＆＃39;来修复它。 var后面

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} />
    )
}

Answer 3

如果上述解决方案不起作用，您还可以尝试以其他方式设置转换格式：

render() {
    const xPx = 50;
    const yPercent = 50;
    return <div style={{transform: `translateX(${xPx}px) translateY(${yPercent}%)`}}></div>
}

Answer 4

您可以将translate用作属性，从而在不指定transform的情况下提供所有转换

style={{
  position: "fixed",
  bottom: "0px",
  left: "50%",
  maxWidth:'450px',
  zIndex: 1,
  translateX:'-50%'
}}

Answer 5

这可以使用字符串模板文字 ` 作为转换键的值来完成：

const styles = {
logo: {
    transform: `translateX(20px)`
},

function Navbar() {
    return (
        <nav style={styles.nav}>
            <div style={styles.wrapper}>
                <p className="logo" style={styles.logo}>Hello</p>
            </div>

有关模板文字的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

使用CSS转换：使用ReactJS翻译（...）

5 个答案: