传播或休息操作员澄清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一部分传递给子组件。