关于反应运动的压倒式语法

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语法让我不知所措。我试着在巴贝尔REPL上翻译它，但是它去掉了JSX的语法：

"use strict";

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

这在前ES6JSX语法中转换为什么？

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>

可以写成

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。

它们只有两个非常不同的地方(有指向适当文档的链接)：

• 语法，它还使用类似于(和工作类似) 毁伤的表单。
• 箭头函数，它允许您简明地定义函数

另外，像<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>这样的语法常常令人困惑，但是请记住，attr={}允许您传递一个JS表达式，并且表达式只是一个对象文本。这在功能上相当于：

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