为什么我不能在我的 Motion 回调正文中使用大括号？

Question

最简单的例子：

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

这对我有用，如果我在回调主体周围放置 花括号：

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

我遇到了不变违规。我误解这里发生了什么吗？如果我明确 return 回调中的元素，我不会得到不变违规，但动画不起作用。

Answer 1

Motion 组件需要一个函数作为其唯一的子组件，这是您在两个示例中都提供的。 Motion 将使用更新后的 x 值连续调用（或渲染）此函数，直到动画结束。

现在取决于提供的函数 return React 可以实际呈现的东西，即你的函数应该 return 一个有效的 React 元素。

在您的第一个示例中，您实际上 return 正在创建一个有效元素：

<div>{value.x}</div>

在使用JSX时，大括号用于嵌入JS表达式，表达式必须解析为值。但是在你的第二个例子中，你正在 returning 一个不解析任何东西的 JS 表达式，它只是 "contains" 一个元素：

{ <div>{value.x}</div> }

这基本上等同于在 "normal" 渲染方法中执行此操作：

render() {
  return (
    { <div>Content</div> }
  )
}

如果你出于某种原因想要将它包裹在花括号中，你必须确保它解析为 React 可以呈现的内容。或者，换句话说，你的表达式必须 return 一个有效的 React 元素，例如：

{value => {return <div>{value.x}</div>}}

为什么我不能在我的 Motion 回调正文中使用大括号？

Why can't I use curly braces in the body of my Motion callback?

javascript

react-motion