sintassi Travolgente sulle reagire-motion

Question

ho voluto usare https://github.com/chenglou/react-motion ma quando guardo il primissimo esempio:

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

ho ottenuto sopraffatto con la sintassi ES6 e la sintassi JSX. Ho provato a tradurlo sul babel REPL ma strisce fuori la sintassi JSX:

"use strict"; 

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

Cosa comporta tutto questo per sintassi pre-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> 

potrebbe scrivere equivalentemente come

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> 

senza caratteristiche ES6 ma utilizzando JSX.

hanno solo due cose che sono molto diverse (con collegamenti a documenti del caso):

• The import syntax, che utilizza anche una forma che assomiglia (e funziona come) destructuring
• Arrow functions che consentono di conciso definire funzioni

sintassi anche come <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> è spesso fonte di confusione, ma ricordate che attr={} permette di trasmettere l'espressione JS, e la espressione è semplicemente un oggetto letterale. Questo è funzionalmente equivalente a:

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