Question

看看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函数？传递给this函数的参数是否总是与从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）被提取并作为道具传递给子组件。

哪个与rest parameters不同：

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


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

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

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

1 个答案: