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，它也使用类似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}>

反应动作的压倒性语法

1 个答案: