对象扩展符号变换如何反应 redux 道具？

Posted 2023-02-23

【中文标题】对象扩展符号变换如何反应 redux 道具？

【英文标题】：How does object spread notation transform react redux props?

【发布时间】：2016-12-26 02:09:28

【问题描述】：

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

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 完全对应？

【问题讨论】：

就 javascript 而言，它并不是真正的对象扩展运算符，它是一个看起来非常相似的 React 概念。它必须看起来像 ...todo 才能被解释为 ES6 对象扩展运算符。

【参考方案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）被提取并作为道具传递给子组件。

与rest parameters 不同的是：

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


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

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