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

【问题标题】：How does object spread notation transform react redux props?对象扩展符号变换如何反应 redux 道具？
【发布时间】：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 对象扩展运算符。

标签： javascript reactjs components redux react-redux

【解决方案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 的额外键。

【讨论】：