propTypes 声明中的意外标记

Question

我正在试用 react-boilerplate。它带有一些发电机。

当我生成一个所有选项都勾选是的新容器时...

? 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 未导入，将是未定义的。

所以，发电机坏了，或者说不够用。

propTypes 声明中的意外标记

unexpected token in propTypes declaration

javascript

reactjs

react-boilerplate