का उपयोग सीएसएस परिणत: का अनुवाद (...) ReactJS

Question

साथ करने के लिए https://facebook.github.io/react/tips/inline-styles.html

सीएसएस शैलियों घटक को एक वस्तु के रूप गुजरता होने की जरूरत के अनुसार। हालांकि, यदि आप ट्रांसफॉर्म शैलियों का उपयोग करने का प्रयास कर रहे हैं तो आपको एक त्रुटि मिलेगी।

Answer 1

मेरा समाधान पहले स्ट्रिंग को संयोजित करना था और फिर ऑब्जेक्ट को पास करना था। यहां 'पीएक्स' के उपयोग पर ध्यान दें।

render: function() { 

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

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

Answer 2

अनुवाद भी मेरे लिए काम नहीं कर रहा था। मैंने var के पीछे 'px' जोड़कर इसे ठीक किया।

ES6 कोड:

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

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