javascript - 对象传播符号如何转换 react redux Prop ？

Question

查看 react-redux docs ，我对对象扩展符号如何将对象转换为 Prop 感到困惑。在下面的例子中:

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

{...todo} 如何转换为在内部工作-

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

我知道 {...todo} 返回一个对象，该对象具有已完成的键、文本和 ID。但是如何提取它以适应 const Todo 函数呢？传入此函数的参数是否始终与从 TodoList 传入的 props 完全对应？

Answer 1

确切地说，考虑一下:

const MyParentComponent =  () => {
  const bar = { a: 'Hello', b: 'world' }

  return <MyChildComponent foo={ '!' } {...bar} />
}


const MyChildComponent = ({ a, b, foo }) => (
  <div>{ `${a} ${b}${foo}` }</div>
)

由于扩展符号，bar 的键(a 和 b)被提取并作为 props 传递给子组件。

这与 rest parameters 不同:

const MyParentComponent =  () => (
  <MyChildComponent a={ 'Hello' } b={ 'world' } foo={ '!' } />
)


const MyChildComponent = ({ a, b, ...bar }) => ({
  <div>{ `${a} ${b}${bar.foo}` }</div>
})

请注意，在这种情况下，bar 是一个包含所有不是 destructured 的额外键的对象.