redux/redux： todo示例什么{... todo}对poprs有效？[重复]

Question

我正在学习redux follow redux教程，当我看到todostodos github示例时，我感到困惑：
Todo.js

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

ist.js

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

todo是一个数组，todo是一个对象：

Todo项目的道具：

我现在知道，Todo，TodoList组件函数通过使用ES6解构赋值传递参数，但是{…Todo}是如何工作的呢？它必须对props做些什么，这里的{}代表它是javascript语法，所以…todo是Varargstotodo组件函数吗？我不知道，任何帮助都很感激。

Answer 1

我们可以检查什么{... todos}编译使用Babel的REPL。

正如您在上面的链接中所看到的（为了清晰起见，我删除了一些内容，但应该足够简单），创建了Todo组件，并将{…Todo}作为一个道具传递给：

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

（为了简单起见，onClickprop被省略了-如果包括它，您将看到\u扩展（{key:todo.id，onClick:/*onClick function*/}，todo）

因此，{…todo}prop实际上会导致Babel生成这个\u extensed函数，该函数定义为：

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生成的一行代码-为了便于阅读，我将其清理干净）

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

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

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

将{…todo}作为道具传递等同于传递

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

作为道具，您可以这样做，因为它是JSX规范的一个特性。