解构到函数的绑定？
解构到函数的绑定？
提问于 2017-09-02 01:02:13
我现在很难理解here中的这段ReactJS代码
const TodoList = ({ todos, onTodoClick }) => (
<ul>
{todos.map(todo => (
<Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} />
))}
</ul>
);我相信({ todos, onTodoClick }) => (...)被称为解构绑定？但从我看到的示例中，它们遵循这样的模式：{...} => (...)，就像在初始哈希中一样，没有用括号括起来，这与我的示例形成了对比。编辑:例如 和
我也不理解的是，这看起来像是一个更新一个值的函数，但它是用const声明的？
我浏览了一下这个站点，我找到了解构绑定的解释，但似乎没有一个能让我深入理解这段代码。
非常感谢您抽出时间阅读这个问题。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-09-02 01:06:01
{ 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';...which可能会导致错误。
const只是强制要求TodoList变量保持不变。这是一个细微的差异，它只是一个通用的最佳实践。
Stack Overflow用户
发布于 2018-08-30 03:52:18
@kuwze -您也可以通过以下方式在ES6解构语法中执行上述操作：
let { todos, onTodoClick } = o;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46004962
复制相关文章
相似问题