प्रतिक्रिया गति

Question

पर भारी वाक्य रचना मैं https://github.com/chenglou/react-motion उपयोग करना चाहता था लेकिन जब मैं पहले ही उदाहरण देखें:

import {Motion, spring} from 'react-motion'; 
// In your render... 
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> 
    {value => <div>{value.x}</div>} 
</Motion> 

मैं ES6 वाक्य रचना और JSX वाक्य रचना के साथ अभिभूत हो गया। मैं babel REPL पर यह अनुवाद करने की कोशिश की लेकिन यह पता स्ट्रिप्स JSX वाक्य रचना:

"use strict"; 

React.createElement(
    Motion, 
    { defaultStyle: { x: 0 }, style: { x: spring(10) } }, 
    function (value) { 
    return React.createElement(
     "div", 
     null, 
     value.x 
    ); 
    } 
); 

क्या इस पूर्व-ES6 JSX वाक्य रचना में से अनुवाद करता है?

Answer 1

import {Motion, spring} from 'react-motion'; 
// In your render... 
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> 
    {value => <div>{value.x}</div>} 
</Motion> 

ES6 सुविधाओं लेकिन JSX का उपयोग किए बिना

var ReactMotion = require("react-motion"); 
var Motion = ReactMotion.Motion; 
var spring = ReactMotion.spring; 
// In your render... 
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> 
    {function (value) { return <div>{value.x}</div>; }} 
</Motion> 

के रूप में समतुल्य रूप में लिखा जा सकता है।

वे केवल दो चीजें हैं जो बहुत अलग (उचित डॉक्स के लिंक के साथ) कर रहे हैं:

• The import syntax है, जो भी एक रूप है जो जैसा दिखता है का उपयोग करता है (और की तरह काम करता है) destructuring
• Arrow functions जो आप संक्षेप में करने की अनुमति परिभाषित कार्यों

भी वाक्य रचना <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> की तरह अक्सर भ्रामक है, लेकिन याद रखें कि attr={} आप एक JS एक्सप्रेशन पारित करने के लिए अनुमति देता है, और अभिव्यक्ति बस एक वस्तु शाब्दिक है। यह कार्यात्मक रूप से समतुल्य है:

var defaultStyle = {x: 0}; 
var style = {x: spring(10)}; 
<Motion defaultStyle={defaultStyle} style={style}>