es6는 어떻게 연산자에서 객체를 변형하여 소품으로 변환합니까?

Question

{...todo}이 Todo 구성 요소에서 작동하도록하려면 다음과 같은 형태로 소품으로 변형되어야합니다. completed=false text="clean room"하지만 스프레드 연산자로 어떻게 처리합니까? 현재 {...todo}을 {completed:false}, {text:"clean room"}으로 변환하지 않으시겠습니까?

const TodoList = ({ todos, onTodoClick }) => (
    <ul> 
    {todos.map(todo => 
     <Todo 
     key={todo.id} 
     {...todo} 
     onClick={() => onTodoClick(todo.id)} 
     /> 
    )} 
    </ul> 
) 

Answer 1

이미 설립, 확산 구문의 사용은 여기에 함께 할 수 없다 ES6은 JSX 구조입니다.

JSX는 React.createElement 호출에 대한 구문 식 설탕입니다. 소품은 실제로 그 기능에 대한 물체로 전달됩니다.

Babel repl을 사용하면 JSX가 어떻게 변형되는지 확인할 수 있습니다. 확산 소품없이

:

// In 
<Component foo="bar" baz="42" /> 

// Out 
React.createElement(
    Component, 
    { foo: "bar", baz: "42" } 
); 

확산 소품으로 : 소품이 확산 소품이 포함 된 경우

// In 
<Component foo="bar" {...xyz} baz="42" /> 

// Out 
React.createElement(
    Component, 
    Object.assign({ foo: "bar" }, xyz, { baz: "42" }) 
); 

그래서 당신이 볼 수, 그들은 여러 개체로 분리 단순히 병합됩니다.

Answer 2

ES6 확산 연산자는 참으로 {...todo} to {completed:false}, {text:"clean room"}를 변환하여 작동합니다.

그러나 동일한 연산자가 JSX에서 사용되지만 반드시 동일하지는 않습니다. msdn docs 가입일

,

확산 구문 표현식 장소에서 팽창되도록 여기서 (함수 호출에 대한) 다수의 인수 또는 (할당 destructuring 용) ( 배열 리터럴) 복수의 요소 또는 다수의 변수 이 필요합니다.

이 아이디어에 따라 JSX spread operator이 생성되었습니다. React docs에 따르면

그 ... 연산자 (또는 확산 연산자) 이미 ES6에 배열 지원된다. Object Rest에 대한 ECMAScript 제안 및 스프레드 등록 정보도 있습니다. JSX에서 더 깨끗한 구문을 제공하기 위해 지원되는이 표준과 개발 표준을 활용하고 있습니다.

이 이미 확산 연산자의 아이디어를 다음과 이후는, 둘의 통일은 참으로 사회의 환영 생각입니다