對象傳播符號如何轉換反應道具？

看着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傳入的道具完全對應？

來源

2016-08-19 jleistack

就JavaScript而言，它不是一個真正的對象擴展運算符，它是一個React概念，看起來非常相似。它必須像'{{... todo}}'被解釋爲ES6對象擴展運算符。 – dannyjolie

沒錯，考慮：

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的對象。

來源

2016-08-19 03:36:03 martriay

對象傳播符號如何轉換反應道具？

回答

相關問題