オブジェクトスプレッド表記法はどのようにしてreduxの小道具に反応しますか？

Question

リアプロダクションdocsを見ると、オブジェクトスプレッド表記がどのようにオブジェクトを小道具に変えるのか混乱しています。以下の例の場合：

私は {...todo}が完了キー、テキスト、およびIDを持つオブジェクトを返します知っ

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

inside- {...todo}が動作するように形質転換し得るんか

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

。しかし、それはどのようにconst Todo関数に収まるように抽出されますか？この関数に渡される引数は、常にTodoListから渡される小道具に正確に対応するでしょうか？

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異なる

：この場合にはbarがdestructuredないすべての余分なキーを含むオブジェクトであることを

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


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

注意してください。