傳播或休息運營商澄清ES6

我在跟隨反應教程，我需要一點澄清。在App.js組件的渲染函數中，spread操作符用於通過映射到比賽數組而暴露的比賽對象。 ContestPreview.js組件如何在不指定屬性的情況下將它用作道具，以及爲什麼在此實例中使用了spread運算符？傳播或休息運營商澄清ES6

謝謝。

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

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;

來源

2017-04-03 Norman Chan

這是一種方便的方法，因爲您正在傳播這些對象的屬性。「休息」操作員是什麼意思？從未聽說過這個例子 – ZekeDroid

@ZekeDroid這個例子沒有「休息」，但它會像'const [a，b，... others] = [1,2,3,4,5,6];' – loganfsmyth

'...'不是操作符，它是[*標點符號*]（http://www.ecma-international.org/ecma-262/7.0/index.html#sec-punctuators），也是[ *休息*]（http://www.ecma-international.org/ecma-262/7.0/index.html#prod-AssignmentRestElement）和[*傳播*]（http://www.ecma-international.org/ ecma-262/7.0/index.html＃prod-SpreadElement）語法。另請參閱MDN [* Rest parameters *]（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/rest_parameters）和[* Spread語法*]（https：//developer.mozilla。組織/ EN /文檔/網絡/的JavaScript /參考/運營/ Spread_operator）。 – RobG

在

<div {...props} />

上下文傳播語法（...）這裏是專門JSX，它有自己的JSX定義的行爲，因爲它不是正常的ES6傳播，也不是提議的對象傳播。

The JSX spread syntax將採用給定對象的所有屬性，並將它們作爲props的一部分傳遞給子組件。

來源

2017-04-03 22:25:22 loganfsmyth

傳播或休息運營商澄清ES6

回答

相關問題