React、material-ui 和 stepper：如何在每个步骤中显示 html

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 本身的一部分，而不显示在下面它自己的内容窗格中。

如果您想显示一些更大的内容，您应该在state 中跟踪当前步骤索引，并根据该索引显示内容。这将是更多代码，但您将能够正确显示内容。顺便说一下，doc 就是这样做的。

这里有一个 sn-p，展示了如何实现这一点：

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。

Answer 2

可以在 MUI 的 Stepper 中插入 HTML，但重要的是要注意此过程受到 Material-UI 的限制 - 即您不能直接将 HTML 作为 Step 的子项应用。给定docs中的例子：

<Stepper linear={false}>
   <Step completed={visited.indexOf(0) !== -1} active={stepIndex === 0}>
      <StepButton onClick={() => this.setState({stepIndex: 0})}>
          Select campaign settings
      </StepButton>
   </Step>
   <Step completed={visited.indexOf(1) !== -1} active={stepIndex === 1}>
     <StepButton onClick={() => this.setState({stepIndex: 1})}>
        Create an ad group
      </StepButton>
    </Step>
  </Stepper>

我们可以简单地将一个元素添加到 StepButton 的图标属性中，从而覆盖默认图标并插入我们自己的 HTML。请以 JS Fiddle 为例：

https://jsfiddle.net/Asalem1/te3yruxz/17/