react步骤条

 

 

 

https://codesandbox.io/s/3x53wjqqk6

有时间再把代码提交上来

npm install @material-ui/core

App.js

import React, { Component } from "react";
import Step1 from "./Step1";
import Step2 from "./Step2";
// import Step3 from "./Step3";
import PropTypes from "prop-types";
import { withStyles } from '@material-ui/core/styles';
import Stepper from "@material-ui/core/Stepper";
import Step from "@material-ui/core/Step";
import StepLabel from "@material-ui/core/StepLabel";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";

const styles = theme => ({
  root: {
    width: "90%"
  },
  backButton: {
    marginRight: theme.spacing.unit
  },
  instructions: {
    marginTop: theme.spacing.unit,
    marginBottom: theme.spacing.unit
  }
});

function getSteps() {
  return [
    "one step",
    "two step"
  ];
}

function getStepContent(stepIndex) {
  switch (stepIndex) {
    // case 0:
    //   return "Step1";
    // case 1:
    //   return 'What is an ad group anyways?';
    case 0:
      return ;
    case 1:
      return ;
    default:
      return "Unknown stepIndex";
  }
}

class App extends Component {
  state = {
    activeStep: 0
  };

  handleNext = () => {
    this.setState(state => ({
      activeStep: state.activeStep + 1
    }));
  };

  handleBack = () => {
    this.setState(state => ({
      activeStep: state.activeStep - 1
    }));
  };

  handleReset = () => {
    this.setState({
      activeStep: 0
    });
  };

  render() {
    const { classes } = this.props;
    const steps = getSteps();
    const { activeStep } = this.state;

    return (
      

        
          {steps.map(label => (
            
              {label}
            
          ))}
        
        

          {this.state.activeStep === steps.length ? (
            

              {/*  */}
              
                All steps completed
              
              Reset
            
          ) : (
            

              
                {getStepContent(activeStep)}
              
              

                
                  Back
                
                
                  {activeStep === steps.length - 1 ? "Finish" : "Next"}
                
              
            
          )}
        
      
    );
  }
}
// export default App;
export default withStyles(styles)(App);

Step1.js

import React, { Component } from 'react';
class Step1 extends Component {
  render() {
    return (
      
Step1
    );
  }
}

export default Step1;

Step2.js

import React, { Component } from 'react';
class Step2 extends Component {
  render() {
    return (
      
Step2
    );
  }
}

export default Step2;

出现报错：

cannot appear as a descendant of