為什么不能在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>}}