傳播或休息操作員澄清ES6

Question

我正在關注反應教程，我需要一點澄清。 在App.js組件的render函數中，spread運算符用於通過contests數組映射公開的競賽對象。 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

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

在上下文中

<div {...props} />

這里的擴展語法（ ... ）特別是JSX，它有自己的JSX定義行為，因為它不是正常的ES6擴展，也不是建議的對象擴展。

JSX擴展語法將獲取給定對象的所有屬性，並將它們作為props一部分傳遞給子組件。