为什么我不能在我的运动回调体中使用花括号呢？

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组件期望一个函数作为它的唯一子函数，这是您在两个示例中提供的。动态将使用更新的x值连续调用(或呈现)此函数，直到动画完成为止。

现在由提供的函数返回React可以实际呈现的内容，即您的函数应该返回一个有效的React元素。

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

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

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

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

这基本上相当于在“正常”呈现方法中执行此操作：

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

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

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