Question

我目前无法尝试从here了解这段ReactJS代码：

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

我相信({ todos, onTodoClick }) => (...)被称为解构绑定？但是从我见过的例子来看，他们遵循这样的模式：{...} => (...)，因为初始哈希没有用括号括起来，与我的例子形成鲜明对比。 修改：示例包括here和here。

我也不明白它似乎这是一个更新值但却用const声明的函数？

我环顾了一下这个网站，我找到了解构绑定的解释，但是没有一个能让我深入了解这段代码。

非常感谢你花时间阅读这个问题。

Answer 1

{ todos, onTodoClick }语法（Parameter handling as destructuring ）表示此函数接受一个对象。如果对象具有todos或onTodoClick的键，则可以将它们用作变量。这只是函数开头这种常见模式的语法糖：

let todos = o.todos;
let onTodoClick = o.onTodoClick;

由于您在JSX中，因此您希望事物看起来尽可能具有声明性，因此这种语法特别方便。

const TodoList部分将TodoList定义为不能修改的常量函数引用。在这种情况下，const与此函数可能仅修改指向函数本身的指针的任何值无关。

此函数声明与可能更熟悉的函数非常相似：

var TodoList = function(o) {
    // etc
};

但是，如果您使用该表格，那么从技术上讲，这样做是合法的：

TodoList = 'foobar';

......这可能会导致错误。

const只是强制TodoList变量保持不变。这是一个微妙的差异，只是一般的最佳实践。

Answer 2

@kuwze-您还可以通过以下方式在ES6解构语法中进行上述操作：

let { todos, onTodoClick } = o;

解构绑定到函数？

2 个答案: