reactjs - React、material-ui 和步进器 : how to display html in each steps

Question

标题说明了一切。从Stepper的例子来看似乎只能显示一段文字。是否可以改为显示 html？

如果我把html放进去<StepContent />该页面看起来很奇怪:

我使用了以下代码:

<Stepper activeStep={0}>
    <Step key={1}>
        <StepLabel>FOO</StepLabel>
        <StepContent>
            <div>
                <FormControl component="fieldset" required>
                    <FormLabel component="legend">Gender</FormLabel>
                    <RadioGroup
                        aria-label="gender"
                        name="gender1"
                        value={this.state.value}>
                        <FormControlLabel value="female" control={<Radio/>} label="Female"/>
                        <FormControlLabel value="male" control={<Radio/>} label="Male"/>
                        <FormControlLabel value="other" control={<Radio/>} label="Other"/>
                        <FormControlLabel
                            value="disabled"
                            disabled
                            control={<Radio/>}
                            label="(Disabled option)"
                        />
                    </RadioGroup>
                </FormControl>
            </div>
        </StepContent>
    </Step>
    <Step key={2}>
        <StepLabel> bar </StepLabel>
    </Step>
</Stepper>

Answer 1

您放入 StepContent 中的任何内容都将显示为 Step 本身的一部分，并且不会显示在下面它自己的内容 Pane 中。

如果您想显示一些较大的内容，您应该跟踪状态中的当前步骤索引，并根据该索引显示内容。这将需要更多代码，但您将能够正确显示内容。 doc就是这样的顺便说一句，确实如此。

以下代码片段展示了如何实现这一目标:

class HorizontalLinearStepper extends React.Component {
  static propTypes = {
    classes: PropTypes.object,
  };

  // Track the active step to know what content to show
  state = {
    activeStep: 0,
  };

  getNumberOfSteps() {
    return 2;
  }

  // Get content based on which step is active
  getStepContent(step) {
    switch (step) {
      case 0:
        return (
          <div>
            <FormControl component="fieldset" required>
              <FormLabel component="legend">Gender</FormLabel>
              <RadioGroup
                aria-label="gender"
                name="gender1"
                value={this.state.value}>
                <FormControlLabel value="female" control={<Radio />} label="Female" />
                <FormControlLabel value="male" control={<Radio />} label="Male" />
                <FormControlLabel value="other" control={<Radio />} label="Other" />
                <FormControlLabel
                  value="disabled"
                  disabled
                  control={<Radio />}
                  label="(Disabled option)"
                />
              </RadioGroup>
            </FormControl>
          </div>
        );
      case 1:
        return (
          <div>
            <Typography>Some more arbitrary content.</Typography>
            <Button>And a big button for good measure</Button>
          </div>
        );
      default:
        return 'Unknown step';
    }
  }

  // Update the active state according to the next button press
  handleNext = () => {
    const { activeStep } = this.state;
    this.setState({
      activeStep: activeStep + 1
    });
  };

  // Similar for back and reset buttons
  handleBack = () => {
    const { activeStep } = this.state;
    this.setState({
      activeStep: activeStep - 1,
    });
  };

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

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

    // Notice that the content below isn't in the Stepper, it's in its own pane underneath
    return (
      <div className={classes.root}>
        <Stepper activeStep={activeStep}>
          <Step key={0}>
            <StepLabel>FOO</StepLabel>
          </Step>
          <Step key={1}>
            <StepLabel> bar </StepLabel>
          </Step>
        </Stepper>
        <div>
          {activeStep === this.getNumberOfSteps() ? (
            <div>
              <Typography className={classes.instructions}>
                All steps completed - you&quot;re finished
              </Typography>
              <Button onClick={this.handleReset} className={classes.button}>
                Reset
              </Button>
            </div>
          ) : (
            <div>
              {
                // Populate the content pane based on the active step
                this.getStepContent(activeStep)
              }
              <div>
                <Button
                  disabled={activeStep === 0}
                  onClick={this.handleBack}
                  className={classes.button}
                >
                  Back
                </Button>
                <Button
                  variant="raised"
                  color="primary"
                  onClick={this.handleNext}
                  className={classes.button}
                >
                    {activeStep === this.getNumberOfSteps() - 1 ? 'Finish' : 'Next'}
                </Button>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
}

您可以看到完整的工作示例 here .