的反應運動

鋪天蓋地的語法我想用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語法？

來源

2015-10-04 Michelle

*「這在ES6之前的語法中意味着什麼？」*正是巴貝爾向您展示的內容。你覺得有什麼特別的困惑？第一個例子中唯一具體的es6是模塊導入和箭頭函數。其他任何東西都是JSX或對象文字。 –

@FelixKling，對不起，我的意思是「這在ES6之前的JSX語法中轉化爲什麼？」 – Michelle

只需用函數表達式替換箭頭函數即可。 'function（value）{return

{value.x}

; }'。結果就是你的答案。 –

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

可以等效寫成

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>

沒有ES6的功能，但使用JSX。

他們只有兩件事情是非常不同的（鏈接到相應的文檔）：

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}>

來源

2015-10-04 18:25:26

回答

相關問題