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은 애니메이션이 끝날 때까지 업데이트 된 x 값을 사용하여이 함수를 계속 호출하거나 렌더링합니다.

이제 React가 실제로 렌더링 할 수있는 기능을 반환합니다. 즉, 함수가 유효한 React 요소를 반환해야합니다. 첫 번째 예에서

는 유효한 요소 반환 사실에 있습니다

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

JSX를 사용하여, 중괄호 JS 식을 임베딩하고, 표현은 값으로 해결해야합니다. 그것은 기본적으로 "정상"렌더링 방법 안에이 일을하는 것과의

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

:하지만 두 번째 예를 들어, 당신은 아무것도 해결되지 않는 JS 식을 반환하고, 그냥 요소 "포함" :

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

어떤 이유로 당신은 중괄호 내부를 포장하려는 경우, 당신은 뭔가 해결 있는지 확인해야 할 것 렌더링 할 수있는 반응한다. 또는, 즉 넣어, 당신의 표현은 유효한 반작용 요소, 예를 들어 반환해야합니다 :

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