react/redux: todo 示例啥 ...to do 为教皇工作？ [复制]

Posted 2023-02-21

技术标签:

【中文标题】react/redux: todo 示例啥 ...to do 为教皇工作？ [复制]【英文标题】：react/redux: todos example what ...todo work for poprs? [duplicate]react/redux: todo 示例什么 ...to do 为教皇工作？ [复制] 【发布时间】：2017-10-04 22:59:45 【问题描述】：

我正在按照 redux 教程学习 redux，当我看到 todos todos-github 示例时让我感到困惑： Todo.js

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,TodoList 组件函数通过使用 ES6 Destructuring assignment 传递参数，但 ...todo 是如何工作的？它必须对props 做点什么，这里的代表它是一个javascript syntax，所以...todo 是Varargs 到Todo 的组件函数？我不知道，任何帮助不胜感激。

【问题讨论】：

这是扩展运算符语法。查看重复的问题 【参考方案1】：

我们可以使用Babel's REPL检查...todos编译成什么。

正如您在上面的链接中看到的（为了清楚起见，我删除了一些东西，但它应该足够简单）创建Todo 组件和...todo 作为道具传递的部分被编译为：

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

（为简单起见，省略了 onClick 属性 - 如果包含它，您将看到 _extends( key: todo.id, onClick: /* onClick function */ , todo)

所以...todo这个属性实际上是导致Babel生成这个_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; 
;

（上面的代码是由 Babel 生成的单行代码 - 为了便于阅读，我对其进行了清理）

因此，如您所见，使用解构赋值将 props 传递给 React 组件会导致解构对象的所有属性被复制到创建时传递给组件的 props 对象中。这种行为不是一个标准化的 ES6 特性——相反，它是 JSX 语法的一部分。

总而言之：如果您的 todo 对象看起来像：