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

据

---

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

我的解决方案是首先连接字符串，然后将其传递给对象。注意这里使用的“px”

render: function() {

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

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

render:function（）{
var分裂=100；
var-ctop=100；
var ctrans='翻译（'+cleft+'px'，+ctop+'px）'；
变量css={
转换：ctrans
}
报税表（
)
}
翻译也不适合我。我通过在变量后面添加“px”来修复它

ES6代码：

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

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

render（）{
常数x=100；
常数y=100；
常量样式={
transform:`translate（${x}px，${y}px）`
};
返回(
);
}
如果上述解决方案不起作用，您也可以尝试使用不同的格式设置转换：

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

render（）{
常数xPx=50；
常数=50；
返回
}
您可以将translate用作属性react提供所有translate，而无需指定transform

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

你能添加一个代码示例和错误消息吗？React显然是对错误的css默默地做出反应，我在比例值周围缺少了意合。同样，我做了
转换：“translate（-50%，-50%）；”
并没有注意到样式上的差异，直到我注意到这是由
引起的不可怕，React不会对此发出错误，它只是默默地失败。谢谢你的正确答案。但这并不是我要的-这终于对我起作用了。令人惊讶的微妙。。。