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表达式，它只包含＆＃34;包含＆＃34;元素：

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

它基本上相当于在＆＃34;正常＆＃34;内执行此操作。渲染方法：

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

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

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

为什么我不能在Motion回调的主体中使用花括号？

1 个答案: