Question

编写React组件时出现SyntaxError: Unexpected token错误。

错误附近的组件类的方法是：

renderFieldLastName() {
    return (
        <Field
            style={styles.field}
            name="lastname"
            floatingLabelText="Patient Last Name"
            component={FieldTextField}
            required
        />
    );
}

renderDobFields() {
    return (<div>
        hola
    <div />);
}

renderSubmitButton() {
    const { pristine, submitting } = this.props;
    const disabled = (this.state.initialized) ? false : (submitting  || pristine);
    return (
        <RaisedButton
            style={styles.button}
            type="submit"
            label="Enter secure chat"
            secondary
            disabled={disabled}
        />
    );
}

特别是我在这一行得到错误：

 const { pristine, submitting } = this.props;

我无法弄清楚我收到错误的位置。

这是整个组件代码：

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { browserHistory } from 'react-router';
import { reduxForm, Field, SubmissionError } from 'redux-form'
import { RaisedButton, Paper, TextField } from 'material-ui';

import * as actionsAuth from '../redux/modules/auth';
import { createValidator, required, email } from '../utils/validation';
import FieldTextField from '../components-form/FieldTextField';


const styles = {
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-around',
        paddingTop: 50
    },
    paper: {
        padding: 20,
        maxWidth: 500
    },
    field: {
        width: '100%'
    },
    button: {
        width: '100%',
        marginTop: 10
    }
};

const validate = createValidator({
    firstname: [],
    lastname: [],
    birthday: []
});

class LoginPage extends Component {

    constructor(props) {
        super();
        this.submit = this.submit.bind(this);
        this.state = {
          initialized: false
        };
    }

    static propTypes = {
        patientChatLogin: PropTypes.func.isRequired
    };

    submit(values) {
        const { user } = this.props;
        let dob = values.birthday.split('-');
        let data = {
            _id: user.id,
            firstname: values.firstname,
            lastname: values.lastname,
            dob: {
                year: dob[0],
                month: dob[1],
                day: dob[2]
            }
        }
        const { patientChatLogin } = this.props;

        return patientChatLogin(data)
            .then(this.onSubmitSuccess, this.onSubmitError);
    }

    onSubmitSuccess(patient) {
        browserHistory.push(`/chat/${patient.id}`);
    }

    onSubmitError(rejection) {
        throw new SubmissionError({ auth: rejection.error, _error: 'Login failed!' });
    }

    ///////////////////
    // render

    render() {
        return (
            <div style={styles.root}>
                {this.renderForm()}
            </div>
        );
    }

    componentWillMount() {
        const { handleSubmit, initialize, location: {query} } = this.props;
        if (query.firstname && query.firstname !== 'undefined' &&
            query.lastname && query.lastname !== 'undefined' &&
            query.dob && query.dob !== 'undefined') {
            this.setState({
              initialized: true
            });
            initialize({
              firstname: query.firstname,
              lastname: query.lastname,
              birthday: query.dob
            });
        }

    }
    renderForm() {
        const { handleSubmit} = this.props;
        return (
            <form
                onSubmit={handleSubmit(values => this.submit(values))}
            >
                <Paper style={styles.paper} zDepth={1}>
                    {this.renderFieldFirstName()}
                    {this.renderFieldLastName()}
                    {this.renderDobFields()}
                    {this.renderSubmitButton()}
                </Paper>
            </form>
        );
    }

    renderFieldFirstName() {
        // TODO:
        // Set default as redux-form requires it
        return (
            <Field
                autoFocus
                style={styles.field}
                name="firstname"
                floatingLabelText="Patient First Name"
                component={FieldTextField}
                required
            />
        );
    }

    renderFieldLastName() {
        return (
            <Field
                style={styles.field}
                name="lastname"
                floatingLabelText="Patient Last Name"
                component={FieldTextField}
                required
            />
        );
    }

    renderDobFields() {
        return (<div>
            hola
        <div />);
    }

    renderSubmitButton() {
        const { pristine, submitting } = this.props;
        const disabled = (this.state.initialized) ? false : (submitting  || pristine);
        return (
            <RaisedButton
                style={styles.button}
                type="submit"
                label="Enter secure chat"
                secondary
                disabled={disabled}
            />
        );
    }
}

export default connect(state => ({
        user: state.auth.user,
}), {
        ...actionsAuth,
    })
    (reduxForm({
        form: 'AuthenticatePatientForm',
        validate
    })(LoginPage));

Answer 1

renderDobFields() {
        return (<div>
            hola
        <div />);
    }

看看最后一个div :)尝试用</div>关闭它，一切都应该有效。

为什么我在此React组件代码中遇到解析错误？

1 个答案: