Question

以下代码我在第9行收到错误语法错误：意外的令牌（9:10）有人可以告诉我这段代码的问题以及如何修复它。

import React from 'react';
import {SelectField, MenuItem, getMuiTheme, MuiThemeProvider,Stepper,Step,StepLabel,StepButton,StepContent} from 'material-ui'
    import injectTapEventPlugin from 'react-tap-event-plugin';
    import RaisedButton from 'material-ui/RaisedButton';
    import FlatButton from 'material-ui/FlatButton';

    class StepperComponent extends React.Component{

        state = {
            stepIndex: 0,
        }

        handleNext = () => {
            const {stepIndex} = this.state;
            if (stepIndex < 2) {
                this.setState({stepIndex: stepIndex + 1});
            }
        };

        handlePrev = () => {
            const {stepIndex} = this.state;
            if (stepIndex > 0) {
                this.setState({stepIndex: stepIndex - 1});
            }
        };

        renderStepActions(step) {
            return (
                <div style={{margin: '12px 0'}}>
                    <RaisedButton
                        label="Next"
                        disableTouchRipple={true}
                        disableFocusRipple={true}
                        primary={true}
                        onTouchTap={this.handleNext}
                        style={{marginRight: 12}}
                    />
                    {step > 0 && (
                        <FlatButton
                            label="Back"
                            disableTouchRipple={true}
                            disableFocusRipple={true}
                            onTouchTap={this.handlePrev}
                        />
                    )}
                </div>
            );
        }

        render() {
            const {stepIndex} = this.state;

            return (
                <div style={{maxWidth: 380, maxHeight: 400, margin: 'auto'}}>
                    <MuiThemeProvider muiTheme={getMuiTheme}>
                    <Stepper
                        activeStep={stepIndex}
                        linear={false}
                        orientation="vertical"
                    >
                        <Step>
                            <StepButton onClick={() => this.setState({stepIndex: 0})}>
                                GROUP NAME
                            </StepButton>
                            <StepContent>
                                <p>
                                   Add group name and description selection component here
                                </p>
                                {this.renderStepActions(0)}
                            </StepContent>
                        </Step>
                        <Step>
                            <StepButton onClick={() => this.setState({stepIndex: 1})}>
                                STUDENT
                            </StepButton>
                            <StepContent>
                                <p> Add student component here </p>
                                {this.renderStepActions(1)}
                            </StepContent>
                        </Step>
                        <Step>
                            <StepButton onClick={() => this.setState({stepIndex: 2})}>
                                VERIFY
                            </StepButton>
                            <StepContent>
                                <p>
                                    Add verify group component here
                                </p>
                                {this.renderStepActions(2)}
                            </StepContent>
                        </Step>
                    </Stepper>
                </MuiThemeProvider>
                </div>
            );
        }
    }

    export default StepperComponent;

如果我使用下面的替代语法，那么它不会给我任何编译错误但不知何故按钮点击事件不起作用。

constructor(props) {
        super(props);
        this.state = {
            stepIndex: 0,
        };
    }


    handleNext () {
        const {stepIndex} = this.state;
        if (stepIndex < 2) {
            this.setState({stepIndex: stepIndex + 1});
        }
    };

    handlePrev () {
        const {stepIndex} = this.state;
        if (stepIndex > 0) {
            this.setState({stepIndex: stepIndex - 1});
        }
    };

Answer 1

你不能

state = {
            stepIndex: 0,
        }

在类中，你必须将状态对象放在构造函数

中

constructor(props){
  super(props);
  this.state = {
            stepIndex: 0,
        }
}

Answer 2

第一个错误是由于如果你想直接设置一个初始状态你必须在构造函数中这样做的事实

应使用this.setState修改所有其他实例中的状态。

解决为什么使用第二种代码语法会破坏handleNext / handlePrev：

在React中使用ES6类语法意味着内联事件不会自动绑定到组件。

对this.setState或this.state的任何调用都无法正常工作，因为this指的是的上下文我们调用的处理程序：按钮。

设置初始状态并在构造函数中使用 bind ：

constructor(props){
  super(props);
  this.state = {
    stepState: 0
  }
  this.handleNext = this.handleNext.bind(this);
  this.handlePrev = this.handlePrev.bind(this);
}

Answer 3

您需要使用babel预设Stage-2或更低版本才能将函数和变量声明为类属性。 类属性初始值设定项语法是es2016 specifications的一部分，并被transform-class-properties插件接受。

这是一个高度实验性的功能，但您可以通过配置.babelrc：

来使用它

添加预设 Stage-2 （npm install --save-dev babel-preset-stage-2）

"presets": ["react", "es2015", "stage-2"]

或特定插件（npm install --save-dev babel-plugin-transform-class-properties）

"plugins": ["transform-class-properties"]

在此之后，您的原始代码（如下所示）可以正常工作。

class StepperComponent extends React.Component{

    state = {
        stepIndex: 0,
    }

    handleNext = () => {
        const {stepIndex} = this.state;
        if (stepIndex < 2) {
            this.setState({stepIndex: stepIndex + 1});
        }
    };

    // ...

反应jsx组件的编译问题

3 个答案: