反应运动的压倒性语法

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>

可以等价地写成

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, which also uses a form that resembles (and works like) 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}>

反应运动的压倒性语法

Overwhelming syntax on react-motion

javascript

syntax

ecmascript-6

reactjs

react-jsx