React JSX Transform 无效

Question

代码如下：Also posted on CodePen

    
    let transStyle = {
            flex: 1,
            backgroundColor: '#cccc99',
            width:200,
            height:200,
            transform: [
                { perspective: 500 },
                { translateX: -45 },
                { rotateY: '60deg' },
            ],
    }
    
   
    const App = (
        <div style={{padding:100}}>
              <div style={transStyle}>mydiv</div>
        </div>
    );
    
    
    ReactDOM.render(
      App,
      document.getElementById("app")
    );

在 CSS 表单中完美运行的转换效果在 JSX 中不起作用。需要 JSX 才能实时更改值。如果你知道哪里出了问题，请更新笔谢谢。

Answer 1

我认为style道具只支持一级键。从数组转换为一个字符串似乎可行：

    let transStyle = {
        flex: 1,
        backgroundColor: '#cccc99',
        width:200,
        height:200,
        transform: `perspective(850px) translateX(-30px) rotateY(60deg)`,
    }