スプレッドまたはレストオペレータの明確化ES6

Question

私はリアクションチュートリアルに従っています。少し説明が必要です。 App.jsコンポーネントのレンダリング機能では、広がり演算子は、コンテスト配列のマッピングによって公開されたコンテストオブジェクトで使用されます。 ContestPreview.jsコンポーネントはプロパティを名前なしでプロップとしてどのように使用できるのですか。この場合、スプレッド演算子はなぜ使用されていますか？

ありがとうございました。

App.js

import React from 'react'; 
import Header from './Header'; 
import ContestPreview from './ContestPreview'; 
import data from '../testData'; 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     pageHeader: 'Naming Contests', 
     contests: [] 
    }; 
    } 

    componentDidMount() { 
    this.setState({ 
     contests: data.contests 
    }); 
    } 

    render() { 
    return (
     <div className='App'> 
     <Header message={this.state.pageHeader} /> 
     <div> 
      {this.state.contests.map(contest => 
      <ContestPreview key={contest.id} {...contest} 
      /> 
     )}; 
     </div> 
     </div> 
    ); 
    } 
} 

export default App; 

ContestPreview.js

<div {...props} /> 

の文脈では

import React from 'react'; 

const ContestPreview = (contest) => (
    <div className='ContestPreview'> 
    <div className='category-name'> 
     {contest.categoryName} 
    </div> 
    <div className='contest-name'> 
     {contest.contestName} 
    </div> 
    </div> 
); 

export default ContestPreview; 

Answer 1

広がり構文（...）ここでは、具体的JSXあり、それは独自のを持っています通常のES6の普及ではなく、提案されたオブジェクトの普及もないため、JSX定義の動作。

The JSX spread syntaxは、指定されたオブジェクトのすべてのプロパティをとり、propsの一部として子コンポーネントに渡します。