请问两个关于参数传递的问题

Question

这是todolist里的一段代码：
todos.map(todo => {
return <Todo key={todo.id} {…todo} onClick={() => {toggleTodo(todo.id)}}/>
})
这是todo里的：

 const { completed, text, onClick} = this.props;
    return (
      <li 
      	onClick={onClick}
	    style={{
	     textDecoration: completed ? "line-through" : "none"
	    }}
	  >
      	{text}
      </li>
    );

有两个问题想请问一下：
1 子组件用es6的对象解构的方法获得了onClick方法，但是父组件中不是用onClick命名这个函数的，难道不是数组靠下标，对象靠属性名来取值和赋值么？为什么子组件可以随便给props中的属性改名字呢
2 对于父组件来说 onClick={() => {toggleTodo(todo.id)}}就相当于是把toggleTodo传递给子组件了是么，不需要用toggleTodo={toggleTodo}的形式了，是不是对于父组件来说，它上面绑定的事件的函数都可以被子组件用呢？相当于自动传递给他们了

我自己做的时候是把这两个地方都用我自己觉得符合直觉的方式重写了，也是可以正确运行的，但是感觉老师的写法让我觉得我对这些问题的理解有偏差，所以想请问下。非常感谢！

Answer 1

艾特老干部 2019-03-18 15:23:28

你好。

问题1，你的理解有问题。父组件是用onClick作为子组件props中的属性名，所以子组件使用时也是使用的onClick这个属性名，子组件没有更改props中的属性名字。

问题2，父组件中如果这么写： onClick={() => {toggleTodo(todo.id)}}，子组件使用时，调用的方法名就是onClick。父组件中如果这么写：toggleTodo={toggleTodo}，子组件使用时，调用的方法名就是toggleTodo。

• 提问者 hpbrave #1

  。。。真相原来是这样的啊 onClick竟然是属性名 我以为它起码是个不可侵犯的关键字呢

• 慕娘6538821 #2

  为什么父组件是用 onClick 作为子组件的 props 名,这不是个事件名吗