react/redux：todos示例{... todo}爲poprs工作嗎？

我學習終極版遵循終極版教程中，當我看到todostodos-github例如東西讓我困惑：
Todo.jsreact/redux：todos示例{... todo}爲poprs工作嗎？

const Todo = ({ onClick, completed, text}) => (
    <li 
    onClick={onClick} 
    style={{ 
     textDecoration: completed ? 'line-through' : 'none' 
    }} 
    > 
    {text} 
    </li> 
)

TodoList.js

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

todos是一個數組，todo是一個對象：

個

Todo項目的道具：

正如我現在知道了，Todo，在PARAMS TodoList組件功能通過使用ES6 Destructuring assignment，但如何{...todo}工作？它必須做些什麼來props,{}在這是它的代表javascript syntax，所以...todo是一個到Todo組件功能？我不知道，任何幫助欣賞。

來源

2017-05-06 L.Ann

這是一個擴展運算符語法。當我看到代碼時，看到重複的問題 –

我們可以檢查{...todos}編譯爲使用Babel's REPL。

正如你可以在上面的鏈接看到（我刪除一些東西的清晰度，但它應該是足夠簡單）在其中創建Todo組件和{...todo}傳遞作爲道具被編譯到部分：

React.createElement(Todo, _extends({ key: todo.id }, todo));

（該onClick道具已經爲簡單起見，省略了 - 是它包括在內，你會看到_extends({ key: todo.id, onClick: /* onClick function */ }, todo)

所以{...todo}道具實際上導致巴貝爾產生這種_extends功能，其定義爲：

var _extends = Object.assign || function (target) { 
    for (var i = 1; i < arguments.length; i++) { 
    var source = arguments[i]; 
    for (var key in source) { 
     if (Object.prototype.hasOwnProperty.call(source, key)) { 
     target[key] = source[key]; 
     } 
    } 
    } 
    return target; 
};

（以上是由巴別一個班輪生成的代碼 - I清理它的可讀性）

所以，可以看到，通過使用解構分配一個支柱成陣營部件原因將要被複制到道具對象中的所有解構對象的所有屬性在創建時傳遞給該組件。這種行爲不是標準化的ES6功能 - 相反，它是JSX語法的一部分。

總結：如果你todo物體看起來像：

{ completed: false, id: 0, text: "test1" }

傳遞{...todo}爲道具是通過

completed={false} id={0} text="test1"

道具相當於，你能做到這一點，因爲它是一個JSX規範的特徵。

來源

2017-05-06 16:06:48

，我知道它做了什麼！謝謝！ –

react/redux：todos示例{... todo}爲poprs工作嗎？

回答

相關問題