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工作吗？

回答

相关问题