Wie wandelt sich die Objektspreiznotation in redox reps um?

Question

Mit Blick auf die Reaktion-Redux docs, bin ich verwirrt darüber, wie die Objektspreiznotation ein Objekt verwandelt, um Requisiten zu werden. Am Beispiel unten:

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

wie funktioniert die {...todo} verwandelt an der Arbeit Innen-

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

Ich weiß, dass die {...todo} ein Objekt zurückgibt, die Schlüssel abgeschlossen, Text und ID hat. Aber wie wird das herausgenommen, um in die const Todo Funktion zu passen? Werden die Argumente, die an diese Funktion übergeben werden, immer exakt den Requisiten entsprechen, die von TodoList übergeben werden?

Answer 1

Genau betrachten:

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

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


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

Dank der Verbreitung Notation, bar ‚s-Tasten (a und b) werden extrahiert und als Requisiten für das Kind-Komponente übergeben.

Welche von rest parameters unterscheidet:

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


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

Beachten Sie, dass in diesem Fall bar ist ein Objekt alle zusätzlichen Schlüssel enthält, die nicht destructured sind.