überwältigende Syntax reagieren-motion

Question

Ich wollte https://github.com/chenglou/react-motion verwenden, aber wenn ich beim ersten Beispiel aussehen:

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

Ich habe überwältigt von der ES6 Syntax und der JSX Syntax. Ich versuchte es auf dem babel REPL übersetzen, aber es abstreift die JSX Syntax:

"use strict"; 

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

Was dies in der Syntax Pre-ES6 JSX nicht übersetzen?

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> 

könnte äquivalent als

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> 

ohne ES6 Funktionen geschrieben werden, sondern JSX verwenden.

Sie nur zwei Dinge, die sehr unterschiedlich sind (mit Links zu entsprechenden Dokumente):

• The import syntax, die auch eine Form verwendet, die (und funktioniert wie) destructuring
• Arrow functions ähnelt, die Sie prägnant lassen definieren Funktionen

auch Syntax wie <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> oft verwirrend, aber denken Sie daran, dass attr={} können Sie einen JS Ausdruck passieren, und die Ausdruck ist einfach ein Objektliteral. Das entspricht funktionell: