为什么我不能在 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>

我得到一个不变的违规。我误解了这里发生的事情吗？如果我在回调中显式返回元素，我不会得到不变量违反，但动画不起作用。

Answer 1

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

现在由提供的函数来返回 React 可以实际渲染的东西，即你的函数应该返回一个有效的 React 元素。

在您的第一个示例中，您实际上返回了一个有效元素：

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

使用 JSX 时，花括号用于嵌入 JS 表达式，表达式必须解析为值。但是在第二个示例中，您返回的 JS 表达式不能解析为任何内容，它只是“包含”一个元素：

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

这基本上相当于在“普通”渲染方法中执行此操作：

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

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

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