javascript - propTypes 声明中出现意外标记

Question

我正在尝试 react 样板。它配备了一些发电机。

当我生成一个新容器并将所有选项都勾选为"is"时...

? Select the base component type: React.Component
? What should it be called? UsersPage
? Do you want headers? Yes
? Do you want an actions/constants/selectors/reducer tuple for this container? Yes
? Do you want sagas for asynchronous flows? (e.g. fetching data) Yes
? Do you want i18n messages (i.e. will this component use text)? Yes
? Do you want to load resources asynchronously? Yes

...它创建了这个文件。

/**
 *
 * DashboardPage
 *
 */

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Helmet } from 'react-helmet';
import { FormattedMessage } from 'react-intl';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';

import injectSaga from 'utils/injectSaga';
import injectReducer from 'utils/injectReducer';
import makeSelectDashboardPage from './selectors';
import reducer from './reducer';
import saga from './saga';
import messages from './messages';

/* eslint-disable react/prefer-stateless-function */
export class DashboardPage extends React.Component {

  render() {
    return (
      <div>
        <Helmet>
          <title>DashboardPage</title>
          <meta name="description" content="Description of DashboardPage" />
        </Helmet>
        <FormattedMessage {...messages.header} />
        <div>
          <CenteredSection>
            <H2>
              <FormattedMessage {...messages.startProjectHeader} />
            </H2>
            <p>
              <FormattedMessage {...messages.startProjectMessage} />
            </p>
          </CenteredSection>
          <Section>
            <H2>
              <FormattedMessage {...messages.trymeHeader} />
            </H2>
          </Section>
      </div>
    );
  }
}

DashboardPage.propTypes = {
  dispatch: PropTypes.func.isRequired,
};

const mapStateToProps = createStructuredSelector({
  dashboardpage: makeSelectDashboardPage(),
});

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
  };
}

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

const withReducer = injectReducer({ key: 'dashboardPage', reducer });
const withSaga = injectSaga({ key: 'dashboardPage', saga });

export default compose(
  withReducer,
  withSaga,
  withConnect,
)(DashboardPage);

当我在浏览器中加载页面时，我收到一个神秘的错误:

ERROR in ./app/containers/DashboardPage/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token, expected } (53:10)

  51 | 
  52 | DashboardPage.propTypes = {
> 53 |   dispatch: PropTypes.func.isRequired,
     |           ^
  54 | };
  55 | 
  56 | const mapStateToProps = createStructuredSelector({

我希望这个错误能更有帮助。任何人都可以阐明这里实际上可能出了什么问题吗？

Answer 1

在您的 render() 函数中，您缺少结束语 </div>标签。

此外，CenteredSection和Section未导入，并且将是未定义的。

所以，发电机坏了，或者不够充分。